:root{
  --bg:#0d0d0f;
  --bg2:#141418;
  --card:#19191f;
  --text:#f5f2f7;
  --muted:#aaa6b1;
  --line:rgba(255,255,255,.10);
  --accent:#c000ff;
  --accent2:#e066ff;
  --glow:rgba(192,0,255,.55);
  --max:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  background:
    radial-gradient(circle at 78% 7%,rgba(192,0,255,.10),transparent 24%),
    radial-gradient(circle at 20% 66%,rgba(155,231,255,.05),transparent 24%),
    var(--bg);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:100;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit}
.site{
  position:relative;
  isolation:isolate;
}
.wrap{width:min(var(--max),calc(100% - 48px));margin:auto;position:relative}
header{
  position:fixed;top:0;left:0;right:0;z-index:50;height:80px;
  display:flex;align-items:center;
  background:rgba(13,13,15,.72);backdrop-filter:blur(18px);
  border-bottom:1px solid transparent;transition:.25s ease;
}
header.scrolled{border-color:var(--line);background:rgba(13,13,15,.92)}
.header-inner{
  width:min(var(--max),calc(100% - 48px));margin:auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:28px;
}
.brand{
  display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase
}
.brand-mark{
  width:33px;height:33px;border-radius:50%;border:2px solid var(--accent);
  box-shadow:0 0 22px var(--glow), inset 0 0 14px rgba(192,0,255,.18);
  position:relative;
}
.brand-mark:before,.brand-mark:after{
  content:"";position:absolute;width:4px;height:9px;border-radius:999px;background:var(--accent2);top:8px;
  box-shadow:0 0 9px var(--glow);
}
.brand-mark:before{left:9px}.brand-mark:after{right:9px}
nav{display:flex;align-items:center;gap:28px;font-size:14px;color:#d6d2db}
nav a:hover{color:#fff}
.nav-contact{
  position:relative;border:1px solid rgba(192,0,255,.65);padding:11px 16px;border-radius:999px;
  box-shadow:0 0 18px rgba(192,0,255,.12);background:rgba(192,0,255,.05)
}
.nav-contact:after{
  content:"";position:absolute;right:16px;bottom:-14px;width:2px;height:10px;background:var(--accent);
  box-shadow:0 0 8px var(--glow);opacity:.9
}
.hero{
  min-height:900px;padding-top:150px;display:grid;grid-template-columns:1.08fr .92fr;gap:70px;align-items:center
}
.eyebrow{font-size:12px;letter-spacing:.24em;text-transform:uppercase;color:#98939f;font-weight:700}
h1{font-size:clamp(58px,7.2vw,104px);line-height:.93;letter-spacing:-.06em;margin:18px 0 28px;max-width:830px}
h1 span{color:var(--accent2);text-shadow:0 0 35px rgba(192,0,255,.22)}
.lead{font-size:20px;line-height:1.65;color:#c7c3cc;max-width:710px}
.actions{display:flex;gap:12px;margin-top:36px;flex-wrap:wrap}
.btn{padding:15px 20px;border-radius:11px;border:1px solid var(--line);font-weight:700;transition:.2s ease}
.btn-primary{background:#fff;color:#111}
.btn-primary:hover{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:0 0 28px rgba(192,0,255,.32);transform:translateY(-2px)}
.btn-ghost:hover{border-color:rgba(192,0,255,.55);transform:translateY(-2px)}
.hero-card{
  min-height:500px;border:1px solid rgba(192,0,255,.20);border-radius:32px;position:relative;overflow:hidden;
  background:linear-gradient(145deg,#19191e,#0f0f12);
  box-shadow:0 0 80px rgba(192,0,255,.05),inset 0 0 60px rgba(192,0,255,.025);
}
.socket{
  position:absolute;right:-35px;top:-38px;width:310px;height:310px;border-radius:50%;
  background:
    radial-gradient(circle at 36% 28%,#f4b1ff 0 3%,#e066ff 8%,#c000ff 30%,rgba(192,0,255,.40) 46%,rgba(192,0,255,.04) 65%,transparent 72%);
  filter:drop-shadow(0 0 24px rgba(192,0,255,.45));
  animation:float 5s ease-in-out infinite;
}
.socket-face{
  position:absolute;right:41px;top:53px;width:180px;height:180px;border-radius:50%;
  border:2px solid rgba(255,255,255,.48);background:rgba(20,8,24,.64);backdrop-filter:blur(10px);
  box-shadow:inset 0 0 30px rgba(192,0,255,.30),0 0 32px rgba(192,0,255,.20);
}
.socket-face:before,.socket-face:after{
  content:"";position:absolute;top:68px;width:24px;height:38px;border-radius:12px;background:#09090b;
  box-shadow:inset 0 0 8px rgba(255,255,255,.08),0 0 12px rgba(192,0,255,.20)
}
.socket-face:before{left:44px}.socket-face:after{right:44px}
.socket-dot{
  position:absolute;left:50%;bottom:39px;transform:translateX(-50%);
  width:27px;height:27px;border-radius:50%;background:#09090b;
  box-shadow:inset 0 0 8px rgba(255,255,255,.08),0 0 12px rgba(192,0,255,.20)
}
.code{
  position:absolute;left:8%;right:8%;bottom:8%;top:29%;
  border:1px solid rgba(255,255,255,.12);border-radius:20px;padding:22px;
  background:rgba(9,9,12,.76);backdrop-filter:blur(16px);
}
.code .top{display:flex;gap:7px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.code .top i{width:8px;height:8px;border-radius:50%;background:#53535a}
.code p{display:flex;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.06);padding:13px 3px;margin:0;color:#aaa;font-family:ui-monospace,monospace}
.code b{color:var(--accent2);font-weight:500}
@keyframes float{50%{transform:translateY(12px) rotate(2deg)}}

.cable-layer{
  position:absolute;left:0;top:0;width:100%;height:100%;z-index:-1;pointer-events:none;overflow:visible
}
.cable-layer svg{width:100%;height:100%;overflow:visible}
.cable-base{fill:none;stroke:#2b2330;stroke-width:9;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 5px rgba(192,0,255,.12))}
.cable-core{fill:none;stroke:#494951;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cable-live{
  fill:none;stroke:var(--accent);stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round;
  filter:drop-shadow(0 0 8px rgba(192,0,255,.9)) drop-shadow(0 0 18px rgba(192,0,255,.45));
  stroke-dasharray:1;stroke-dashoffset:1;
}
.pulse-dot{fill:#fff;filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 14px var(--accent));opacity:0}
.break-joint{
  position:absolute;right:5.5%;top:840px;z-index:4;width:68px;height:44px;transform:rotate(26deg)
}
.break-joint span{position:absolute;top:19px;width:26px;height:7px;border-radius:99px;background:#2d2d34;box-shadow:inset 0 0 4px rgba(255,255,255,.1)}
.break-joint .left{left:0}.break-joint .right{right:0}
.break-joint:after{
  content:"⚡";position:absolute;left:25px;top:2px;color:var(--accent2);font-size:24px;text-shadow:0 0 14px var(--accent);opacity:.75
}

.section{padding:120px 0;position:relative}
.section h2{font-size:clamp(40px,5vw,68px);letter-spacing:-.045em;line-height:1.02;margin:0 0 18px}
.section-head{max-width:760px;margin-bottom:52px}
.section-head p{font-size:18px;line-height:1.65;color:var(--muted)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card{
  min-height:330px;border:1px solid var(--line);border-radius:22px;padding:28px;background:rgba(25,25,31,.64);
  transition:.25s ease;backdrop-filter:blur(8px)
}
.card:hover{transform:translateY(-5px);border-color:rgba(192,0,255,.34);box-shadow:0 16px 45px rgba(192,0,255,.06)}
.card small{font-family:ui-monospace,monospace;color:#6e6975}
.card h3{font-size:28px;letter-spacing:-.03em;margin:68px 0 12px}
.card p{color:#b9b5bf;line-height:1.6}
.pills{display:flex;flex-wrap:wrap;gap:7px;margin-top:28px}
.pills span{border:1px solid var(--line);padding:7px 10px;border-radius:999px;font-size:11px;color:#a9a5ae}

.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:90px;align-items:start}
.points{border-top:1px solid var(--line)}
.points div{padding:24px 0;border-bottom:1px solid var(--line)}
.points strong{display:block;margin-bottom:6px}
.points p{margin:0;color:var(--muted);line-height:1.6}
.systems{
  border:1px solid rgba(192,0,255,.22);border-radius:30px;padding:38px;
  background:radial-gradient(circle at 15% 0%,rgba(192,0,255,.09),transparent 34%),rgba(21,21,26,.55)
}
.system-cloud{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.system-cloud span{
  padding:10px 13px;border-radius:999px;border:1px solid var(--line);background:#151519;color:#d0ccd4;font-size:13px
}
.system-cloud span:nth-child(3n){border-color:rgba(192,0,255,.28)}

.quote{
  border:1px solid rgba(192,0,255,.28);border-radius:30px;padding:60px;
  background:linear-gradient(135deg,rgba(192,0,255,.08),rgba(155,231,255,.025));
  box-shadow:0 0 55px rgba(192,0,255,.055)
}
.quote .kicker{font-family:ui-monospace,monospace;font-size:12px;letter-spacing:.16em;color:var(--accent2);text-transform:uppercase}
.quote h2{max-width:940px;margin-top:22px}

.contact{
  margin-top:60px;border:1px solid rgba(192,0,255,.35);border-radius:34px;padding:62px;
  display:grid;grid-template-columns:.8fr 1.2fr;gap:80px;position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 0 0,rgba(192,0,255,.13),transparent 35%),
    linear-gradient(145deg,rgba(192,0,255,.025),rgba(18,18,22,.84));
  transition:.45s ease;
}
.contact.connected{
  border-color:var(--accent);
  box-shadow:0 0 0 1px rgba(192,0,255,.10),0 0 40px rgba(192,0,255,.28),0 0 120px rgba(192,0,255,.12),inset 0 0 55px rgba(192,0,255,.04)
}
.connection-status{
  display:inline-flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:999px;padding:8px 11px;
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#8e8994;margin-bottom:22px;transition:.35s ease
}
.connection-status i{width:8px;height:8px;border-radius:50%;background:#555}
.contact.connected .connection-status{color:var(--accent2);border-color:rgba(192,0,255,.35)}
.contact.connected .connection-status i{background:var(--accent);box-shadow:0 0 12px var(--accent)}
.contact-copy h2{margin-top:0}
.contact-copy p{color:var(--muted);font-size:18px;line-height:1.65}
.form{
  border:1px solid var(--line);border-radius:24px;padding:28px;background:rgba(12,12,15,.70);position:relative
}
.form:before{
  content:"";position:absolute;left:-27px;top:50%;width:26px;height:12px;border-radius:8px 0 0 8px;
  background:#25252b;border:1px solid rgba(255,255,255,.08);transition:.35s ease
}
.contact.connected .form:before{
  background:var(--accent);box-shadow:0 0 20px rgba(192,0,255,.55)
}
.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
label{display:block;font-size:12px;color:#a7a2ad;margin-bottom:14px}
input,textarea{
  width:100%;padding:14px;margin-top:8px;border-radius:10px;border:1px solid var(--line);background:#0d0d10;color:#fff;outline:none
}
input:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(192,0,255,.08)}
textarea{min-height:130px;resize:vertical}
.submit{
  width:100%;border:0;border-radius:11px;padding:15px 18px;background:var(--accent);color:white;font-weight:800;cursor:pointer;
  box-shadow:0 0 24px rgba(192,0,255,.24)
}
.end-plug{
  position:absolute;left:-72px;top:50%;transform:translateY(-50%);width:70px;height:42px;transition:.55s cubic-bezier(.2,.9,.2,1)
}
.end-plug .head{
  position:absolute;right:0;top:5px;width:48px;height:32px;border-radius:9px;background:#2b2b32;border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 0 12px rgba(255,255,255,.03)
}
.end-plug .head:before,.end-plug .head:after{
  content:"";position:absolute;right:-13px;width:14px;height:5px;border-radius:3px;background:#7d7d86
}
.end-plug .head:before{top:7px}.end-plug .head:after{bottom:7px}
.end-plug .tail{position:absolute;left:0;top:18px;width:25px;height:7px;border-radius:99px;background:#2b2b32}
.contact.connected .end-plug{left:-48px}
.contact.connected .end-plug .head{border-color:rgba(192,0,255,.6);box-shadow:0 0 22px rgba(192,0,255,.35),inset 0 0 16px rgba(192,0,255,.08)}
footer{padding:40px 0 70px;border-top:1px solid var(--line);color:#77727d;font-size:12px;margin-top:100px}

@media(max-width:900px){
  .hero{grid-template-columns:1fr;min-height:auto;padding-bottom:90px}.hero-card{min-height:430px}
  .grid3{grid-template-columns:1fr 1fr}.split,.contact{grid-template-columns:1fr;gap:42px}
  .contact{padding:42px}.end-plug{display:none}
}
@media(max-width:640px){
  .wrap,.header-inner{width:min(100% - 30px,var(--max))}
  nav a:not(.nav-contact){display:none}
  .hero{padding-top:125px}.hero-card{min-height:390px}
  h1{font-size:54px}.lead{font-size:17px}
  .section{padding:82px 0}.grid3{grid-template-columns:1fr}.card{min-height:280px}
  .quote{padding:35px 24px}.contact{padding:30px 22px;border-radius:25px}
  .row{grid-template-columns:1fr}
}

.nav-status{
  display:inline-flex;
  align-items:center;
  gap:6px;
  margin-left:8px;
  padding:4px 7px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.035);
  vertical-align:middle;
  transition:.35s ease;
}
.nav-status i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#5b5b63;
  transition:.35s ease;
}
.nav-status b{
  font-size:8px;
  letter-spacing:.12em;
  font-weight:800;
  color:#8f8b96;
  transition:.35s ease;
}
.nav-contact.connected{
  border-color:var(--accent);
  box-shadow:
    0 0 18px rgba(192,0,255,.28),
    0 0 42px rgba(192,0,255,.12);
}
.nav-contact.connected .nav-status{
  border-color:rgba(192,0,255,.42);
  background:rgba(192,0,255,.09);
}
.nav-contact.connected .nav-status i{
  background:var(--accent2);
  box-shadow:
    0 0 7px var(--accent2),
    0 0 16px var(--accent);
}
.nav-contact.connected .nav-status b{
  color:var(--accent2);
  text-shadow:0 0 10px rgba(224,102,255,.45);
}

/* stronger live cable */
.cable-live{
  fill:none;
  stroke:url(#cableGradient);
  stroke-width:6.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:
    drop-shadow(0 0 4px rgba(255,255,255,.9))
    drop-shadow(0 0 10px rgba(224,102,255,.95))
    drop-shadow(0 0 24px rgba(192,0,255,.9))
    drop-shadow(0 0 42px rgba(192,0,255,.45));
  stroke-dasharray:1;
  stroke-dashoffset:1;
}
.cable-glow{
  fill:none;
  stroke:var(--accent);
  stroke-width:13;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.34;
  filter:blur(8px);
  stroke-dasharray:1;
  stroke-dashoffset:1;
}
.pulse-dot{
  fill:#fff;
  stroke:var(--accent2);
  stroke-width:3;
  filter:
    drop-shadow(0 0 6px #fff)
    drop-shadow(0 0 14px var(--accent2))
    drop-shadow(0 0 28px var(--accent));
  opacity:0;
}


/* v5 Safari-safe cable rendering */
.cable-layer{
  z-index:-1;
}
.cable-layer svg{
  overflow:visible;
  pointer-events:none;
}
.cable-base{
  stroke:#24242b;
  stroke-width:10;
}
.cable-core{
  stroke:#5d5d68;
  stroke-width:2.4;
  opacity:.58;
}
.cable-glow{
  fill:none;
  stroke:#c000ff;
  stroke-width:18;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.22;
  filter:blur(7px);
}
.cable-live{
  fill:none;
  stroke:#d633ff;
  stroke-width:5.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:
    drop-shadow(0 0 3px rgba(255,255,255,.95))
    drop-shadow(0 0 10px rgba(224,102,255,.95))
    drop-shadow(0 0 20px rgba(192,0,255,.9))
    drop-shadow(0 0 36px rgba(192,0,255,.6));
}
.pulse-dot{
  fill:white;
  stroke:#e066ff;
  stroke-width:3;
  filter:
    drop-shadow(0 0 5px #fff)
    drop-shadow(0 0 14px #e066ff)
    drop-shadow(0 0 24px #c000ff);
}
.nav-contact.connected{
  color:#fff;
  background:rgba(192,0,255,.14);
  border-color:#c000ff;
  box-shadow:
    0 0 14px rgba(192,0,255,.45),
    0 0 34px rgba(192,0,255,.28),
    inset 0 0 18px rgba(192,0,255,.08);
}


.connection-flash{
  position:absolute;
  left:-34px;
  top:50%;
  transform:translate(-50%,-50%) scale(.2) rotate(-10deg);
  font-size:34px;
  line-height:1;
  opacity:0;
  pointer-events:none;
  color:#fff;
  text-shadow:
    0 0 6px #fff,
    0 0 14px #e066ff,
    0 0 28px #c000ff,
    0 0 48px rgba(192,0,255,.85);
  z-index:5;
}
.connection-flash.fire{
  animation:connectionZap .62s ease-out both;
}
@keyframes connectionZap{
  0%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.15) rotate(-18deg);
    filter:brightness(1);
  }
  18%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1.25) rotate(5deg);
    filter:brightness(2);
  }
  38%{
    opacity:.35;
    transform:translate(-50%,-50%) scale(.9) rotate(-4deg);
  }
  55%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1.08) rotate(0deg);
    filter:brightness(1.7);
  }
  100%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.7) rotate(0deg);
    filter:brightness(1);
  }
}
.contact.connected .form{
  animation:contactPulse .72s ease-out;
}
@keyframes contactPulse{
  0%{box-shadow:0 0 0 rgba(192,0,255,0)}
  28%{
    box-shadow:
      0 0 18px rgba(255,255,255,.25),
      0 0 44px rgba(224,102,255,.45),
      0 0 85px rgba(192,0,255,.34);
  }
  100%{
    box-shadow:
      0 15px 50px rgba(0,0,0,.20),
      inset 0 0 30px rgba(192,0,255,.025);
  }
}


/* ===== v7: CSS scroll-driven primary animation (Safari/iPhone friendly) ===== */

/* Make the live cable visible even if JS is blocked */
#cablePathLive{
  stroke-dasharray: 5600;
  stroke-dashoffset: 5600;
  opacity:.95;
}

#cablePathGlow{
  stroke-dasharray: 5600;
  stroke-dashoffset: 5600;
  opacity:.12;
}

/* Progressive reveal tied to page scroll when supported */
@supports (animation-timeline: scroll()) {
  #cablePathLive{
    animation-name:cableFill;
    animation-duration:1s;
    animation-timing-function:linear;
    animation-fill-mode:both;
    animation-timeline:scroll(root block);
  }

  #cablePathGlow{
    animation-name:cableGlowFill;
    animation-duration:1s;
    animation-timing-function:linear;
    animation-fill-mode:both;
    animation-timeline:scroll(root block);
  }

  @keyframes cableFill{
    0%{
      stroke-dashoffset:5600;
      opacity:.72;
    }
    100%{
      stroke-dashoffset:0;
      opacity:1;
    }
  }

  @keyframes cableGlowFill{
    0%{
      stroke-dashoffset:5600;
      opacity:.08;
    }
    100%{
      stroke-dashoffset:0;
      opacity:.52;
    }
  }

  .nav-contact{
    animation-name:navConnect;
    animation-duration:1s;
    animation-timing-function:linear;
    animation-fill-mode:both;
    animation-timeline:scroll(root block);
  }

  @keyframes navConnect{
    0%,82%{
      border-color:rgba(192,0,255,.55);
      box-shadow:0 0 12px rgba(192,0,255,.10);
    }
    92%,100%{
      border-color:#c000ff;
      background:rgba(192,0,255,.14);
      box-shadow:
        0 0 18px rgba(192,0,255,.38),
        0 0 48px rgba(192,0,255,.18);
    }
  }

  .connection-flash{
    animation-name:scrollZap;
    animation-duration:1s;
    animation-timing-function:linear;
    animation-fill-mode:both;
    animation-timeline:scroll(root block);
  }

  @keyframes scrollZap{
    0%,87%{
      opacity:0;
      transform:translate(-50%,-50%) scale(.2) rotate(-14deg);
    }
    91%{
      opacity:1;
      transform:translate(-50%,-50%) scale(1.45) rotate(5deg);
      filter:brightness(2);
    }
    94%{
      opacity:.15;
      transform:translate(-50%,-50%) scale(.8) rotate(-3deg);
    }
    96%{
      opacity:1;
      transform:translate(-50%,-50%) scale(1.15) rotate(0deg);
      filter:brightness(1.8);
    }
    100%{
      opacity:0;
      transform:translate(-50%,-50%) scale(.7);
    }
  }

  #contactBox{
    animation-name:contactEnergize;
    animation-duration:1s;
    animation-timing-function:linear;
    animation-fill-mode:both;
    animation-timeline:scroll(root block);
  }

  @keyframes contactEnergize{
    0%,88%{
      border-color:rgba(192,0,255,.35);
      box-shadow:none;
    }
    94%{
      border-color:#e066ff;
      box-shadow:
        0 0 20px rgba(255,255,255,.18),
        0 0 55px rgba(224,102,255,.36),
        0 0 110px rgba(192,0,255,.22);
    }
    100%{
      border-color:#c000ff;
      box-shadow:
        0 0 35px rgba(192,0,255,.26),
        0 0 90px rgba(192,0,255,.12);
    }
  }
}

/* Visible energy traveling along the whole cable even without JS/scroll timelines */
#cablePathCore{
  stroke-dasharray:10 18;
  animation:coreFlow 1.2s linear infinite;
}

@keyframes coreFlow{
  to{stroke-dashoffset:-56}
}

/* A subtle idle spark at the final connector as a fallback */
.connection-flash{
  will-change:transform,opacity,filter;
}

@supports not (animation-timeline: scroll()) {
  .connection-flash{
    animation:fallbackSpark 3.4s ease-in-out infinite;
  }

  @keyframes fallbackSpark{
    0%,78%,100%{opacity:0;transform:translate(-50%,-50%) scale(.25)}
    84%{opacity:1;transform:translate(-50%,-50%) scale(1.2);filter:brightness(2)}
    89%{opacity:0;transform:translate(-50%,-50%) scale(.7)}
  }

  #cablePathLive{
    animation:fallbackCable 6s linear infinite;
  }

  @keyframes fallbackCable{
    0%{stroke-dashoffset:5600;opacity:.45}
    100%{stroke-dashoffset:0;opacity:1}
  }

  #cablePathGlow{
    animation:fallbackCableGlow 6s linear infinite;
  }

  @keyframes fallbackCableGlow{
    0%{stroke-dashoffset:5600;opacity:.06}
    100%{stroke-dashoffset:0;opacity:.40}
  }
}


/* ===== v8: real Stepsel logo + header cable connection ===== */

.brand.real-logo{
  width:225px;
  height:58px;
  display:flex;
  align-items:center;
  overflow:visible;
  padding:0;
}
.brand.real-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:left center;
  display:block;
}

/* Contact CTA is the physical start point of the cable */
.nav-contact{
  position:relative;
  z-index:6;
}

/* short socket tail only — no floating bridge */
.nav-contact::after{
  content:"";
  position:absolute;
  left:50%;
  top:100%;
  transform:translateX(-50%);
  width:7px;
  height:12px;
  border-radius:0 0 5px 5px;
  background:#292930;
  border-left:1px solid rgba(255,255,255,.08);
  border-right:1px solid rgba(255,255,255,.05);
  box-shadow:
    inset 0 0 4px rgba(255,255,255,.06),
    0 0 8px rgba(192,0,255,.10);
}
/* Bring the main cable forward enough so the join reads as one cable */
.cable-layer{
  z-index:-1;
}

@media(max-width:900px){
  .brand.real-logo{
    width:185px;
    height:50px;
  }
}

@media(max-width:640px){
  .brand.real-logo{
    width:160px;
    height:45px;
  }
}


/* v9: clean header connection */
.nav-contact::before{
  content:"";
  position:absolute;
  left:50%;
  top:calc(100% + 10px);
  transform:translateX(-50%);
  width:4px;
  height:4px;
  border-radius:50%;
  background:#5e5e67;
  box-shadow:0 0 6px rgba(192,0,255,.18);
  transition:.25s ease;
}

.nav-contact.connected::after{
  background:#c000ff;
  box-shadow:
    0 0 6px #e066ff,
    0 0 16px rgba(192,0,255,.75);
}

.nav-contact.connected::before{
  background:#e066ff;
  box-shadow:
    0 0 7px #fff,
    0 0 14px #e066ff,
    0 0 24px #c000ff;
}


/* v9.1 — clean Contact CTA: nothing hanging underneath */
.nav-contact::before,
.nav-contact::after{
  content:none !important;
  display:none !important;
}


/* clean Contact CTA — no arrows, plugs, dots or hanging pseudo-elements */
.nav-contact::before,
.nav-contact::after,
.nav-contact .nav-status::before,
.nav-contact .nav-status::after{
  content:none !important;
  display:none !important;
}
.nav-contact{
  overflow:visible;
}


/* ===== v12 CLEAN BRAND MOTIF ===== */

/* Never show the old hazard / broken-cable marker */
.break-joint{display:none!important}

/* Hero: use the REAL round Stepsel mark from the supplied logo */
.logo-socket-bg{
  position:absolute!important;
  right:-34px!important;
  top:-42px!important;
  width:330px!important;
  height:330px!important;
  border-radius:50%!important;
  background:
    radial-gradient(circle at 48% 48%,rgba(192,0,255,.20),rgba(192,0,255,.07) 44%,transparent 72%)!important;
  filter:
    drop-shadow(0 0 18px rgba(224,102,255,.60))
    drop-shadow(0 0 42px rgba(192,0,255,.30))!important;
  opacity:.92!important;
  animation:float 5s ease-in-out infinite!important;
  display:grid!important;
  place-items:center!important;
  overflow:visible!important;
}
.logo-socket-bg img{
  width:94%!important;
  height:94%!important;
  object-fit:contain!important;
  display:block!important;
  opacity:.93!important;
  filter:
    drop-shadow(0 0 7px rgba(224,102,255,.85))
    drop-shadow(0 0 20px rgba(192,0,255,.48))!important;
}

/* Hide every old pseudo connector / arrow / plug on Contact */
.nav-contact::before,
.nav-contact::after,
.nav-contact .nav-status::before,
.nav-contact .nav-status::after{
  content:none!important;
  display:none!important;
}

/* Contact CTA + status are now two clean separate elements */
.nav-contact-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  position:relative;
  overflow:visible;
}
.nav-contact{
  margin:0!important;
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:108px;
}
.nav-status{
  position:static!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  margin:0!important;
  padding:5px 9px!important;
  border-radius:999px!important;
  border:1px solid rgba(192,0,255,.22)!important;
  background:rgba(192,0,255,.055)!important;
  box-shadow:none!important;
  pointer-events:none;
  white-space:nowrap;
}
.nav-status i{
  width:6px!important;
  height:6px!important;
  border-radius:50%!important;
  background:#69656f!important;
  box-shadow:none!important;
}
.nav-status b{
  font-size:8px!important;
  letter-spacing:.12em!important;
  font-weight:850!important;
  color:#8e8994!important;
  line-height:1!important;
}

/* Connected state */
.nav-contact.connected + .nav-status,
.nav-contact-wrap:has(.nav-contact.connected) .nav-status{
  border-color:rgba(192,0,255,.46)!important;
  background:rgba(192,0,255,.10)!important;
}
.nav-contact.connected + .nav-status i,
.nav-contact-wrap:has(.nav-contact.connected) .nav-status i{
  background:#e066ff!important;
  box-shadow:0 0 7px #fff,0 0 13px #e066ff,0 0 22px #c000ff!important;
}
.nav-contact.connected + .nav-status b,
.nav-contact-wrap:has(.nav-contact.connected) .nav-status b{
  color:#efc4ff!important;
  text-shadow:0 0 10px rgba(192,0,255,.55)!important;
}

/* Header layout remains tidy with badge below CTA */
nav{
  align-items:flex-start!important;
}
.nav-contact-wrap{
  margin-top:-1px;
}

/* Mobile */
@media(max-width:640px){
  .logo-socket-bg{
    width:250px!important;
    height:250px!important;
    right:-52px!important;
    top:-30px!important;
  }
  .nav-status{
    padding:4px 7px!important;
  }
  .nav-status b{
    font-size:7px!important;
  }
}


/* v13 — cable begins directly under the header */
.cable-layer{
  top:0!important;
}

#cablePathBase,
#cablePathCore,
#cablePathLive,
#cablePathGlow{
  vector-effect:non-scaling-stroke;
}

/* Keep the full cable visible from its first pixel under the header */
#cablePathBase{opacity:1!important}
#cablePathCore{opacity:.72!important}


/* v14 — cable physically starts from the Contact CTA */
.contact-cable-start{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  z-index:44;
  pointer-events:none;
  overflow:visible;
}
.contact-start-base,
.contact-start-core,
.contact-start-live{
  fill:none;
  stroke-linecap:round;
}
.contact-start-base{
  stroke:#27272e;
  stroke-width:8;
}
.contact-start-core{
  stroke:#656570;
  stroke-width:2.2;
  stroke-dasharray:8 13;
  animation:coreFlow 1.15s linear infinite;
}
.contact-start-live{
  stroke:#d633ff;
  stroke-width:4.5;
  opacity:.48;
  filter:
    drop-shadow(0 0 4px rgba(255,255,255,.65))
    drop-shadow(0 0 10px rgba(224,102,255,.72))
    drop-shadow(0 0 20px rgba(192,0,255,.50));
}

/* no arrow/plug decorations on CTA */
.nav-contact::before,
.nav-contact::after{
  content:none!important;
  display:none!important;
}


/* ===== v15 — stronger Stepsel brand motif ===== */

/* Make the hero Stepsel socket icon more dominant */
.logo-socket-bg{
  right:-58px!important;
  top:-66px!important;
  width:410px!important;
  height:410px!important;
  opacity:.98!important;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(192,0,255,.24),
      rgba(192,0,255,.09) 43%,
      rgba(192,0,255,.025) 62%,
      transparent 74%)!important;
  filter:
    drop-shadow(0 0 22px rgba(224,102,255,.72))
    drop-shadow(0 0 56px rgba(192,0,255,.38))!important;
}

.logo-socket-bg img{
  width:96%!important;
  height:96%!important;
  opacity:1!important;
  filter:
    drop-shadow(0 0 8px rgba(255,255,255,.12))
    drop-shadow(0 0 12px rgba(224,102,255,.92))
    drop-shadow(0 0 28px rgba(192,0,255,.56))!important;
}

/* Shared subtle icon treatment in other sections */
.brand-mark-section{
  position:relative;
  overflow:visible;
}

.section-step-icon{
  position:absolute;
  pointer-events:none;
  user-select:none;
  z-index:-1;
  object-fit:contain;
  opacity:.055;
  filter:
    drop-shadow(0 0 18px rgba(192,0,255,.16))
    drop-shadow(0 0 42px rgba(192,0,255,.08));
}

/* Systems: large watermark behind the left side */
.section-step-icon-systems{
  width:430px;
  height:430px;
  left:-185px;
  top:30px;
  transform:rotate(-7deg);
  opacity:.045;
}

/* Process: smaller mark on the far right, near the cable */
.section-step-icon-process{
  width:285px;
  height:285px;
  right:-105px;
  top:70px;
  transform:rotate(9deg);
  opacity:.06;
}

/* Contact: faint energized mark behind the CTA copy */
.section-step-icon-contact{
  width:350px;
  height:350px;
  left:-125px;
  top:35px;
  opacity:.06;
  filter:
    drop-shadow(0 0 20px rgba(224,102,255,.22))
    drop-shadow(0 0 55px rgba(192,0,255,.14));
}

/* Slightly stronger contact mark after connection */
#contact .contact.connected ~ .section-step-icon-contact{
  opacity:.10;
}

@media(max-width:900px){
  .logo-socket-bg{
    width:340px!important;
    height:340px!important;
    right:-62px!important;
    top:-45px!important;
  }

  .section-step-icon-systems{
    width:320px;
    height:320px;
    left:-150px;
  }

  .section-step-icon-process{
    width:220px;
    height:220px;
    right:-90px;
  }

  .section-step-icon-contact{
    width:260px;
    height:260px;
    left:-115px;
  }
}

@media(max-width:640px){
  .logo-socket-bg{
    width:285px!important;
    height:285px!important;
    right:-72px!important;
    top:-28px!important;
  }

  .section-step-icon{
    opacity:.035!important;
  }

  .section-step-icon-systems{
    left:-120px;
  }

  .section-step-icon-process{
    right:-110px;
  }

  .section-step-icon-contact{
    left:-125px;
  }
}


/* v15.1 — heading spacing refinement */
.section-head .eyebrow{
  margin-bottom:12px!important;
}

.section-head h2{
  margin-top:0!important;
  margin-bottom:18px!important;
}

/* Keep the eyebrow + title visually as one heading block */
.section-head{
  display:flex;
  flex-direction:column;
  gap:0;
}


/* v15.2 — systems heading needs a little more breathing room */
#systems .eyebrow{
  margin-bottom:20px!important;
}

#systems h2{
  margin-top:0!important;
}


/* ===== v16.1 — technical callout + clean cable ===== */

/* Designed "PEALTNÄHA LIHTNE" block */
.tech-note{
  position:relative;
  margin-top:18px!important;
  padding:30px 32px!important;
  display:grid!important;
  grid-template-columns:190px 1fr!important;
  gap:32px!important;
  align-items:start!important;
  border:1px solid rgba(192,0,255,.30)!important;
  border-radius:22px!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 0% 0%,rgba(192,0,255,.12),transparent 38%),
    linear-gradient(135deg,rgba(192,0,255,.045),rgba(255,255,255,.012))!important;
  box-shadow:
    0 14px 45px rgba(0,0,0,.16),
    inset 0 0 35px rgba(192,0,255,.022)!important;
}

.tech-note::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:linear-gradient(
    180deg,
    #e066ff,
    #c000ff 58%,
    rgba(192,0,255,.15)
  );
  box-shadow:
    0 0 12px rgba(224,102,255,.75),
    0 0 28px rgba(192,0,255,.38);
}

.tech-note::after{
  content:"</>";
  position:absolute;
  right:22px;
  top:18px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:46px;
  font-weight:700;
  letter-spacing:-.08em;
  color:rgba(192,0,255,.06);
  pointer-events:none;
}

.tech-note > span{
  position:relative;
  display:inline-flex!important;
  width:max-content;
  align-items:center;
  gap:9px;
  margin-top:2px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(192,0,255,.24);
  background:rgba(192,0,255,.07);
  color:#e9b6ff!important;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace!important;
  font-size:10px!important;
  font-weight:800!important;
  line-height:1!important;
  letter-spacing:.13em!important;
}

.tech-note > span::before{
  content:"";
  width:7px;
  height:7px;
  flex:0 0 7px;
  border-radius:50%;
  background:#c000ff;
  box-shadow:
    0 0 7px #e066ff,
    0 0 15px rgba(192,0,255,.75);
}

.tech-note p{
  position:relative;
  z-index:1;
  margin:0!important;
  max-width:800px!important;
  color:#c4c0c9!important;
  font-size:16px!important;
  line-height:1.72!important;
}

/* Remove the white moving keeper/dot completely */
#pulseDot,
.pulse-dot{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
}

/* Keep cable animation focused on the cable itself */
#cablePathLive{
  filter:
    drop-shadow(0 0 4px rgba(224,102,255,.65))
    drop-shadow(0 0 12px rgba(192,0,255,.60))
    drop-shadow(0 0 26px rgba(192,0,255,.32))!important;
}

@media(max-width:760px){
  .tech-note{
    grid-template-columns:1fr!important;
    gap:18px!important;
    padding:26px 24px!important;
  }

  .tech-note::after{
    font-size:36px;
    right:16px;
    top:14px;
  }
}



.nav-contact{position:relative;margin-top:8px}
.nav-status{
  position:absolute;
  right:0;
  top:-22px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:0;
  margin:0;
  border:0;
  background:transparent;
  white-space:nowrap;
}
.nav-status i{
  width:7px;height:7px;border-radius:50%;background:#65616b;
  box-shadow:none;
}
.nav-status b{font-size:8px;letter-spacing:.13em;color:#77727d;font-weight:900}
.nav-contact.connected .nav-status i{
  background:#e066ff;
  box-shadow:0 0 7px #fff,0 0 14px #e066ff,0 0 26px #c000ff;
}
.nav-contact.connected .nav-status b{color:#e9b5ff;text-shadow:0 0 12px rgba(192,0,255,.75)}

/* make the current unmistakably visible */
.cable-layer{z-index:0;mix-blend-mode:screen;opacity:.98}
main,footer{position:relative;z-index:1}
.cable-base{stroke:#232329;stroke-width:8;opacity:.9}
.cable-core{stroke:#55505c;stroke-width:2.2;opacity:.8}
.cable-glow{
  fill:none;stroke:#c000ff;stroke-width:18;stroke-linecap:round;stroke-linejoin:round;
  opacity:.26;filter:blur(10px);stroke-dasharray:1;stroke-dashoffset:1;
}
.cable-live{
  fill:none;stroke:#e066ff;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;
  opacity:1;stroke-dasharray:1;stroke-dashoffset:1;
  filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px #e066ff) drop-shadow(0 0 18px #c000ff) drop-shadow(0 0 34px rgba(192,0,255,.85));
}
.pulse-dot{fill:white;stroke:#e066ff;stroke-width:3;opacity:0;filter:drop-shadow(0 0 5px #fff) drop-shadow(0 0 14px #e066ff) drop-shadow(0 0 28px #c000ff)}

/* v5 Safari-safe cable rendering */
.cable-layer{
  z-index:-1;
}
.cable-layer svg{
  overflow:visible;
  pointer-events:none;
}
.cable-base{
  stroke:#24242b;
  stroke-width:10;
}
.cable-core{
  stroke:#5d5d68;
  stroke-width:2.4;
  opacity:.58;
}
.cable-glow{
  fill:none;
  stroke:#c000ff;
  stroke-width:18;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.22;
  filter:blur(7px);
}
.cable-live{
  fill:none;
  stroke:#d633ff;
  stroke-width:5.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:
    drop-shadow(0 0 3px rgba(255,255,255,.95))
    drop-shadow(0 0 10px rgba(224,102,255,.95))
    drop-shadow(0 0 20px rgba(192,0,255,.9))
    drop-shadow(0 0 36px rgba(192,0,255,.6));
}
.pulse-dot{
  fill:white;
  stroke:#e066ff;
  stroke-width:3;
  filter:
    drop-shadow(0 0 5px #fff)
    drop-shadow(0 0 14px #e066ff)
    drop-shadow(0 0 24px #c000ff);
}
.nav-contact.connected{
  color:#fff;
  background:rgba(192,0,255,.14);
  border-color:#c000ff;
  box-shadow:
    0 0 14px rgba(192,0,255,.45),
    0 0 34px rgba(192,0,255,.28),
    inset 0 0 18px rgba(192,0,255,.08);
}


.connection-flash{
  position:absolute;
  left:-34px;
  top:50%;
  transform:translate(-50%,-50%) scale(.2) rotate(-10deg);
  font-size:34px;
  line-height:1;
  opacity:0;
  pointer-events:none;
  color:#fff;
  text-shadow:
    0 0 6px #fff,
    0 0 14px #e066ff,
    0 0 28px #c000ff,
    0 0 48px rgba(192,0,255,.85);
  z-index:5;
}
.connection-flash.fire{
  animation:connectionZap .62s ease-out both;
}
@keyframes connectionZap{
  0%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.15) rotate(-18deg);
    filter:brightness(1);
  }
  18%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1.25) rotate(5deg);
    filter:brightness(2);
  }
  38%{
    opacity:.35;
    transform:translate(-50%,-50%) scale(.9) rotate(-4deg);
  }
  55%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1.08) rotate(0deg);
    filter:brightness(1.7);
  }
  100%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.7) rotate(0deg);
    filter:brightness(1);
  }
}
.contact.connected .form{
  animation:contactPulse .72s ease-out;
}
@keyframes contactPulse{
  0%{box-shadow:0 0 0 rgba(192,0,255,0)}
  28%{
    box-shadow:
      0 0 18px rgba(255,255,255,.25),
      0 0 44px rgba(224,102,255,.45),
      0 0 85px rgba(192,0,255,.34);
  }
  100%{
    box-shadow:
      0 15px 50px rgba(0,0,0,.20),
      inset 0 0 30px rgba(192,0,255,.025);
  }
}


/* ===== v7: CSS scroll-driven primary animation (Safari/iPhone friendly) ===== */

/* Make the live cable visible even if JS is blocked */
#cablePathLive{
  stroke-dasharray: 5600;
  stroke-dashoffset: 5600;
  opacity:.95;
}

#cablePathGlow{
  stroke-dasharray: 5600;
  stroke-dashoffset: 5600;
  opacity:.12;
}

/* Progressive reveal tied to page scroll when supported */
@supports (animation-timeline: scroll()) {
  #cablePathLive{
    animation-name:cableFill;
    animation-duration:1s;
    animation-timing-function:linear;
    animation-fill-mode:both;
    animation-timeline:scroll(root block);
  }

  #cablePathGlow{
    animation-name:cableGlowFill;
    animation-duration:1s;
    animation-timing-function:linear;
    animation-fill-mode:both;
    animation-timeline:scroll(root block);
  }

  @keyframes cableFill{
    0%{
      stroke-dashoffset:5600;
      opacity:.72;
    }
    100%{
      stroke-dashoffset:0;
      opacity:1;
    }
  }

  @keyframes cableGlowFill{
    0%{
      stroke-dashoffset:5600;
      opacity:.08;
    }
    100%{
      stroke-dashoffset:0;
      opacity:.52;
    }
  }

  .nav-contact{
    animation-name:navConnect;
    animation-duration:1s;
    animation-timing-function:linear;
    animation-fill-mode:both;
    animation-timeline:scroll(root block);
  }

  @keyframes navConnect{
    0%,82%{
      border-color:rgba(192,0,255,.55);
      box-shadow:0 0 12px rgba(192,0,255,.10);
    }
    92%,100%{
      border-color:#c000ff;
      background:rgba(192,0,255,.14);
      box-shadow:
        0 0 18px rgba(192,0,255,.38),
        0 0 48px rgba(192,0,255,.18);
    }
  }

  .connection-flash{
    animation-name:scrollZap;
    animation-duration:1s;
    animation-timing-function:linear;
    animation-fill-mode:both;
    animation-timeline:scroll(root block);
  }

  @keyframes scrollZap{
    0%,87%{
      opacity:0;
      transform:translate(-50%,-50%) scale(.2) rotate(-14deg);
    }
    91%{
      opacity:1;
      transform:translate(-50%,-50%) scale(1.45) rotate(5deg);
      filter:brightness(2);
    }
    94%{
      opacity:.15;
      transform:translate(-50%,-50%) scale(.8) rotate(-3deg);
    }
    96%{
      opacity:1;
      transform:translate(-50%,-50%) scale(1.15) rotate(0deg);
      filter:brightness(1.8);
    }
    100%{
      opacity:0;
      transform:translate(-50%,-50%) scale(.7);
    }
  }

  #contactBox{
    animation-name:contactEnergize;
    animation-duration:1s;
    animation-timing-function:linear;
    animation-fill-mode:both;
    animation-timeline:scroll(root block);
  }

  @keyframes contactEnergize{
    0%,88%{
      border-color:rgba(192,0,255,.35);
      box-shadow:none;
    }
    94%{
      border-color:#e066ff;
      box-shadow:
        0 0 20px rgba(255,255,255,.18),
        0 0 55px rgba(224,102,255,.36),
        0 0 110px rgba(192,0,255,.22);
    }
    100%{
      border-color:#c000ff;
      box-shadow:
        0 0 35px rgba(192,0,255,.26),
        0 0 90px rgba(192,0,255,.12);
    }
  }
}

/* Visible energy traveling along the whole cable even without JS/scroll timelines */
#cablePathCore{
  stroke-dasharray:10 18;
  animation:coreFlow 1.2s linear infinite;
}

@keyframes coreFlow{
  to{stroke-dashoffset:-56}
}

/* A subtle idle spark at the final connector as a fallback */
.connection-flash{
  will-change:transform,opacity,filter;
}

@supports not (animation-timeline: scroll()) {
  .connection-flash{
    animation:fallbackSpark 3.4s ease-in-out infinite;
  }

  @keyframes fallbackSpark{
    0%,78%,100%{opacity:0;transform:translate(-50%,-50%) scale(.25)}
    84%{opacity:1;transform:translate(-50%,-50%) scale(1.2);filter:brightness(2)}
    89%{opacity:0;transform:translate(-50%,-50%) scale(.7)}
  }

  #cablePathLive{
    animation:fallbackCable 6s linear infinite;
  }

  @keyframes fallbackCable{
    0%{stroke-dashoffset:5600;opacity:.45}
    100%{stroke-dashoffset:0;opacity:1}
  }

  #cablePathGlow{
    animation:fallbackCableGlow 6s linear infinite;
  }

  @keyframes fallbackCableGlow{
    0%{stroke-dashoffset:5600;opacity:.06}
    100%{stroke-dashoffset:0;opacity:.40}
  }
}


/* ===== v8: real Stepsel logo + header cable connection ===== */

.brand.real-logo{
  width:225px;
  height:58px;
  display:flex;
  align-items:center;
  overflow:visible;
  padding:0;
}
.brand.real-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:left center;
  display:block;
}

/* Contact CTA is the physical start point of the cable */
.nav-contact{
  position:relative;
  z-index:6;
}

/* short socket tail only — no floating bridge */
.nav-contact::after{
  content:"";
  position:absolute;
  left:50%;
  top:100%;
  transform:translateX(-50%);
  width:7px;
  height:12px;
  border-radius:0 0 5px 5px;
  background:#292930;
  border-left:1px solid rgba(255,255,255,.08);
  border-right:1px solid rgba(255,255,255,.05);
  box-shadow:
    inset 0 0 4px rgba(255,255,255,.06),
    0 0 8px rgba(192,0,255,.10);
}
/* Bring the main cable forward enough so the join reads as one cable */
.cable-layer{
  z-index:-1;
}

@media(max-width:900px){
  .brand.real-logo{
    width:185px;
    height:50px;
  }
}

@media(max-width:640px){
  .brand.real-logo{
    width:160px;
    height:45px;
  }
}


/* v9: clean header connection */
.nav-contact::before{
  content:"";
  position:absolute;
  left:50%;
  top:calc(100% + 10px);
  transform:translateX(-50%);
  width:4px;
  height:4px;
  border-radius:50%;
  background:#5e5e67;
  box-shadow:0 0 6px rgba(192,0,255,.18);
  transition:.25s ease;
}

.nav-contact.connected::after{
  background:#c000ff;
  box-shadow:
    0 0 6px #e066ff,
    0 0 16px rgba(192,0,255,.75);
}

.nav-contact.connected::before{
  background:#e066ff;
  box-shadow:
    0 0 7px #fff,
    0 0 14px #e066ff,
    0 0 24px #c000ff;
}


/* v9.1 — clean Contact CTA: nothing hanging underneath */
.nav-contact::before,
.nav-contact::after{
  content:none !important;
  display:none !important;
}


/* clean Contact CTA — no arrows, plugs, dots or hanging pseudo-elements */
.nav-contact::before,
.nav-contact::after,
.nav-contact .nav-status::before,
.nav-contact .nav-status::after{
  content:none !important;
  display:none !important;
}
.nav-contact{
  overflow:visible;
}


/* ===== v12 CLEAN BRAND MOTIF ===== */

/* Never show the old hazard / broken-cable marker */
.break-joint{display:none!important}

/* Hero: use the REAL round Stepsel mark from the supplied logo */
.logo-socket-bg{
  position:absolute!important;
  right:-34px!important;
  top:-42px!important;
  width:330px!important;
  height:330px!important;
  border-radius:50%!important;
  background:
    radial-gradient(circle at 48% 48%,rgba(192,0,255,.20),rgba(192,0,255,.07) 44%,transparent 72%)!important;
  filter:
    drop-shadow(0 0 18px rgba(224,102,255,.60))
    drop-shadow(0 0 42px rgba(192,0,255,.30))!important;
  opacity:.92!important;
  animation:float 5s ease-in-out infinite!important;
  display:grid!important;
  place-items:center!important;
  overflow:visible!important;
}
.logo-socket-bg img{
  width:94%!important;
  height:94%!important;
  object-fit:contain!important;
  display:block!important;
  opacity:.93!important;
  filter:
    drop-shadow(0 0 7px rgba(224,102,255,.85))
    drop-shadow(0 0 20px rgba(192,0,255,.48))!important;
}

/* Hide every old pseudo connector / arrow / plug on Contact */
.nav-contact::before,
.nav-contact::after,
.nav-contact .nav-status::before,
.nav-contact .nav-status::after{
  content:none!important;
  display:none!important;
}

/* Contact CTA + status are now two clean separate elements */
.nav-contact-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  position:relative;
  overflow:visible;
}
.nav-contact{
  margin:0!important;
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:108px;
}
.nav-status{
  position:static!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  margin:0!important;
  padding:5px 9px!important;
  border-radius:999px!important;
  border:1px solid rgba(192,0,255,.22)!important;
  background:rgba(192,0,255,.055)!important;
  box-shadow:none!important;
  pointer-events:none;
  white-space:nowrap;
}
.nav-status i{
  width:6px!important;
  height:6px!important;
  border-radius:50%!important;
  background:#69656f!important;
  box-shadow:none!important;
}
.nav-status b{
  font-size:8px!important;
  letter-spacing:.12em!important;
  font-weight:850!important;
  color:#8e8994!important;
  line-height:1!important;
}

/* Connected state */
.nav-contact.connected + .nav-status,
.nav-contact-wrap:has(.nav-contact.connected) .nav-status{
  border-color:rgba(192,0,255,.46)!important;
  background:rgba(192,0,255,.10)!important;
}
.nav-contact.connected + .nav-status i,
.nav-contact-wrap:has(.nav-contact.connected) .nav-status i{
  background:#e066ff!important;
  box-shadow:0 0 7px #fff,0 0 13px #e066ff,0 0 22px #c000ff!important;
}
.nav-contact.connected + .nav-status b,
.nav-contact-wrap:has(.nav-contact.connected) .nav-status b{
  color:#efc4ff!important;
  text-shadow:0 0 10px rgba(192,0,255,.55)!important;
}

/* Header layout remains tidy with badge below CTA */
nav{
  align-items:flex-start!important;
}
.nav-contact-wrap{
  margin-top:-1px;
}

/* Mobile */
@media(max-width:640px){
  .logo-socket-bg{
    width:250px!important;
    height:250px!important;
    right:-52px!important;
    top:-30px!important;
  }
  .nav-status{
    padding:4px 7px!important;
  }
  .nav-status b{
    font-size:7px!important;
  }
}


/* v13 — cable begins directly under the header */
.cable-layer{
  top:0!important;
}

#cablePathBase,
#cablePathCore,
#cablePathLive,
#cablePathGlow{
  vector-effect:non-scaling-stroke;
}

/* Keep the full cable visible from its first pixel under the header */
#cablePathBase{opacity:1!important}
#cablePathCore{opacity:.72!important}


/* v14 — cable physically starts from the Contact CTA */
.contact-cable-start{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  z-index:44;
  pointer-events:none;
  overflow:visible;
}
.contact-start-base,
.contact-start-core,
.contact-start-live{
  fill:none;
  stroke-linecap:round;
}
.contact-start-base{
  stroke:#27272e;
  stroke-width:8;
}
.contact-start-core{
  stroke:#656570;
  stroke-width:2.2;
  stroke-dasharray:8 13;
  animation:coreFlow 1.15s linear infinite;
}
.contact-start-live{
  stroke:#d633ff;
  stroke-width:4.5;
  opacity:.48;
  filter:
    drop-shadow(0 0 4px rgba(255,255,255,.65))
    drop-shadow(0 0 10px rgba(224,102,255,.72))
    drop-shadow(0 0 20px rgba(192,0,255,.50));
}

/* no arrow/plug decorations on CTA */
.nav-contact::before,
.nav-contact::after{
  content:none!important;
  display:none!important;
}


/* ===== v15 — stronger Stepsel brand motif ===== */

/* Make the hero Stepsel socket icon more dominant */
.logo-socket-bg{
  right:-58px!important;
  top:-66px!important;
  width:410px!important;
  height:410px!important;
  opacity:.98!important;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(192,0,255,.24),
      rgba(192,0,255,.09) 43%,
      rgba(192,0,255,.025) 62%,
      transparent 74%)!important;
  filter:
    drop-shadow(0 0 22px rgba(224,102,255,.72))
    drop-shadow(0 0 56px rgba(192,0,255,.38))!important;
}

.logo-socket-bg img{
  width:96%!important;
  height:96%!important;
  opacity:1!important;
  filter:
    drop-shadow(0 0 8px rgba(255,255,255,.12))
    drop-shadow(0 0 12px rgba(224,102,255,.92))
    drop-shadow(0 0 28px rgba(192,0,255,.56))!important;
}

/* Shared subtle icon treatment in other sections */
.brand-mark-section{
  position:relative;
  overflow:visible;
}

.section-step-icon{
  position:absolute;
  pointer-events:none;
  user-select:none;
  z-index:-1;
  object-fit:contain;
  opacity:.055;
  filter:
    drop-shadow(0 0 18px rgba(192,0,255,.16))
    drop-shadow(0 0 42px rgba(192,0,255,.08));
}

/* Systems: large watermark behind the left side */
.section-step-icon-systems{
  width:430px;
  height:430px;
  left:-185px;
  top:30px;
  transform:rotate(-7deg);
  opacity:.045;
}

/* Process: smaller mark on the far right, near the cable */
.section-step-icon-process{
  width:285px;
  height:285px;
  right:-105px;
  top:70px;
  transform:rotate(9deg);
  opacity:.06;
}

/* Contact: faint energized mark behind the CTA copy */
.section-step-icon-contact{
  width:350px;
  height:350px;
  left:-125px;
  top:35px;
  opacity:.06;
  filter:
    drop-shadow(0 0 20px rgba(224,102,255,.22))
    drop-shadow(0 0 55px rgba(192,0,255,.14));
}

/* Slightly stronger contact mark after connection */
#contact .contact.connected ~ .section-step-icon-contact{
  opacity:.10;
}

@media(max-width:900px){
  .logo-socket-bg{
    width:340px!important;
    height:340px!important;
    right:-62px!important;
    top:-45px!important;
  }

  .section-step-icon-systems{
    width:320px;
    height:320px;
    left:-150px;
  }

  .section-step-icon-process{
    width:220px;
    height:220px;
    right:-90px;
  }

  .section-step-icon-contact{
    width:260px;
    height:260px;
    left:-115px;
  }
}

@media(max-width:640px){
  .logo-socket-bg{
    width:285px!important;
    height:285px!important;
    right:-72px!important;
    top:-28px!important;
  }

  .section-step-icon{
    opacity:.035!important;
  }

  .section-step-icon-systems{
    left:-120px;
  }

  .section-step-icon-process{
    right:-110px;
  }

  .section-step-icon-contact{
    left:-125px;
  }
}


/* v15.1 — heading spacing refinement */
.section-head .eyebrow{
  margin-bottom:12px!important;
}

.section-head h2{
  margin-top:0!important;
  margin-bottom:18px!important;
}

/* Keep the eyebrow + title visually as one heading block */
.section-head{
  display:flex;
  flex-direction:column;
  gap:0;
}


/* v15.2 — systems heading needs a little more breathing room */
#systems .eyebrow{
  margin-bottom:20px!important;
}

#systems h2{
  margin-top:0!important;
}


/* ===== v16.1 — technical callout + clean cable ===== */

/* Designed "PEALTNÄHA LIHTNE" block */
.tech-note{
  position:relative;
  margin-top:18px!important;
  padding:30px 32px!important;
  display:grid!important;
  grid-template-columns:190px 1fr!important;
  gap:32px!important;
  align-items:start!important;
  border:1px solid rgba(192,0,255,.30)!important;
  border-radius:22px!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 0% 0%,rgba(192,0,255,.12),transparent 38%),
    linear-gradient(135deg,rgba(192,0,255,.045),rgba(255,255,255,.012))!important;
  box-shadow:
    0 14px 45px rgba(0,0,0,.16),
    inset 0 0 35px rgba(192,0,255,.022)!important;
}

.tech-note::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:linear-gradient(
    180deg,
    #e066ff,
    #c000ff 58%,
    rgba(192,0,255,.15)
  );
  box-shadow:
    0 0 12px rgba(224,102,255,.75),
    0 0 28px rgba(192,0,255,.38);
}

.tech-note::after{
  content:"</>";
  position:absolute;
  right:22px;
  top:18px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:46px;
  font-weight:700;
  letter-spacing:-.08em;
  color:rgba(192,0,255,.06);
  pointer-events:none;
}

.tech-note > span{
  position:relative;
  display:inline-flex!important;
  width:max-content;
  align-items:center;
  gap:9px;
  margin-top:2px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(192,0,255,.24);
  background:rgba(192,0,255,.07);
  color:#e9b6ff!important;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace!important;
  font-size:10px!important;
  font-weight:800!important;
  line-height:1!important;
  letter-spacing:.13em!important;
}

.tech-note > span::before{
  content:"";
  width:7px;
  height:7px;
  flex:0 0 7px;
  border-radius:50%;
  background:#c000ff;
  box-shadow:
    0 0 7px #e066ff,
    0 0 15px rgba(192,0,255,.75);
}

.tech-note p{
  position:relative;
  z-index:1;
  margin:0!important;
  max-width:800px!important;
  color:#c4c0c9!important;
  font-size:16px!important;
  line-height:1.72!important;
}

/* Remove the white moving keeper/dot completely */
#pulseDot,
.pulse-dot{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
}

/* Keep cable animation focused on the cable itself */
#cablePathLive{
  filter:
    drop-shadow(0 0 4px rgba(224,102,255,.65))
    drop-shadow(0 0 12px rgba(192,0,255,.60))
    drop-shadow(0 0 26px rgba(192,0,255,.32))!important;
}

@media(max-width:760px){
  .tech-note{
    grid-template-columns:1fr!important;
    gap:18px!important;
    padding:26px 24px!important;
  }

  .tech-note::after{
    font-size:36px;
    right:16px;
    top:14px;
  }
}



.nav-contact.connected{background:rgba(192,0,255,.14)!important;color:white!important;box-shadow:0 0 14px rgba(192,0,255,.55),0 0 38px rgba(192,0,255,.28)!important}
.nav-contact.connected .nav-status{background:rgba(192,0,255,.20)!important;border-color:#c000ff!important}
.nav-contact.connected .nav-status i{background:#fff!important;box-shadow:0 0 6px #fff,0 0 14px #e066ff,0 0 24px #c000ff!important}
.cable-live{animation:cablePulse 1.25s ease-in-out infinite alternate}
@keyframes cablePulse{from{opacity:.78}to{opacity:1}}

/* v5 Safari-safe cable rendering */
.cable-layer{
  z-index:-1;
}
.cable-layer svg{
  overflow:visible;
  pointer-events:none;
}
.cable-base{
  stroke:#24242b;
  stroke-width:10;
}
.cable-core{
  stroke:#5d5d68;
  stroke-width:2.4;
  opacity:.58;
}
.cable-glow{
  fill:none;
  stroke:#c000ff;
  stroke-width:18;
  stroke-linecap:round;
  stroke-linejoin:round;
  opacity:.22;
  filter:blur(7px);
}
.cable-live{
  fill:none;
  stroke:#d633ff;
  stroke-width:5.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:
    drop-shadow(0 0 3px rgba(255,255,255,.95))
    drop-shadow(0 0 10px rgba(224,102,255,.95))
    drop-shadow(0 0 20px rgba(192,0,255,.9))
    drop-shadow(0 0 36px rgba(192,0,255,.6));
}
.pulse-dot{
  fill:white;
  stroke:#e066ff;
  stroke-width:3;
  filter:
    drop-shadow(0 0 5px #fff)
    drop-shadow(0 0 14px #e066ff)
    drop-shadow(0 0 24px #c000ff);
}
.nav-contact.connected{
  color:#fff;
  background:rgba(192,0,255,.14);
  border-color:#c000ff;
  box-shadow:
    0 0 14px rgba(192,0,255,.45),
    0 0 34px rgba(192,0,255,.28),
    inset 0 0 18px rgba(192,0,255,.08);
}


.connection-flash{
  position:absolute;
  left:-34px;
  top:50%;
  transform:translate(-50%,-50%) scale(.2) rotate(-10deg);
  font-size:34px;
  line-height:1;
  opacity:0;
  pointer-events:none;
  color:#fff;
  text-shadow:
    0 0 6px #fff,
    0 0 14px #e066ff,
    0 0 28px #c000ff,
    0 0 48px rgba(192,0,255,.85);
  z-index:5;
}
.connection-flash.fire{
  animation:connectionZap .62s ease-out both;
}
@keyframes connectionZap{
  0%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.15) rotate(-18deg);
    filter:brightness(1);
  }
  18%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1.25) rotate(5deg);
    filter:brightness(2);
  }
  38%{
    opacity:.35;
    transform:translate(-50%,-50%) scale(.9) rotate(-4deg);
  }
  55%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1.08) rotate(0deg);
    filter:brightness(1.7);
  }
  100%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.7) rotate(0deg);
    filter:brightness(1);
  }
}
.contact.connected .form{
  animation:contactPulse .72s ease-out;
}
@keyframes contactPulse{
  0%{box-shadow:0 0 0 rgba(192,0,255,0)}
  28%{
    box-shadow:
      0 0 18px rgba(255,255,255,.25),
      0 0 44px rgba(224,102,255,.45),
      0 0 85px rgba(192,0,255,.34);
  }
  100%{
    box-shadow:
      0 15px 50px rgba(0,0,0,.20),
      inset 0 0 30px rgba(192,0,255,.025);
  }
}


/* ===== v7: CSS scroll-driven primary animation (Safari/iPhone friendly) ===== */

/* Make the live cable visible even if JS is blocked */
#cablePathLive{
  stroke-dasharray: 5600;
  stroke-dashoffset: 5600;
  opacity:.95;
}

#cablePathGlow{
  stroke-dasharray: 5600;
  stroke-dashoffset: 5600;
  opacity:.12;
}

/* Progressive reveal tied to page scroll when supported */
@supports (animation-timeline: scroll()) {
  #cablePathLive{
    animation-name:cableFill;
    animation-duration:1s;
    animation-timing-function:linear;
    animation-fill-mode:both;
    animation-timeline:scroll(root block);
  }

  #cablePathGlow{
    animation-name:cableGlowFill;
    animation-duration:1s;
    animation-timing-function:linear;
    animation-fill-mode:both;
    animation-timeline:scroll(root block);
  }

  @keyframes cableFill{
    0%{
      stroke-dashoffset:5600;
      opacity:.72;
    }
    100%{
      stroke-dashoffset:0;
      opacity:1;
    }
  }

  @keyframes cableGlowFill{
    0%{
      stroke-dashoffset:5600;
      opacity:.08;
    }
    100%{
      stroke-dashoffset:0;
      opacity:.52;
    }
  }

  .nav-contact{
    animation-name:navConnect;
    animation-duration:1s;
    animation-timing-function:linear;
    animation-fill-mode:both;
    animation-timeline:scroll(root block);
  }

  @keyframes navConnect{
    0%,82%{
      border-color:rgba(192,0,255,.55);
      box-shadow:0 0 12px rgba(192,0,255,.10);
    }
    92%,100%{
      border-color:#c000ff;
      background:rgba(192,0,255,.14);
      box-shadow:
        0 0 18px rgba(192,0,255,.38),
        0 0 48px rgba(192,0,255,.18);
    }
  }

  .connection-flash{
    animation-name:scrollZap;
    animation-duration:1s;
    animation-timing-function:linear;
    animation-fill-mode:both;
    animation-timeline:scroll(root block);
  }

  @keyframes scrollZap{
    0%,87%{
      opacity:0;
      transform:translate(-50%,-50%) scale(.2) rotate(-14deg);
    }
    91%{
      opacity:1;
      transform:translate(-50%,-50%) scale(1.45) rotate(5deg);
      filter:brightness(2);
    }
    94%{
      opacity:.15;
      transform:translate(-50%,-50%) scale(.8) rotate(-3deg);
    }
    96%{
      opacity:1;
      transform:translate(-50%,-50%) scale(1.15) rotate(0deg);
      filter:brightness(1.8);
    }
    100%{
      opacity:0;
      transform:translate(-50%,-50%) scale(.7);
    }
  }

  #contactBox{
    animation-name:contactEnergize;
    animation-duration:1s;
    animation-timing-function:linear;
    animation-fill-mode:both;
    animation-timeline:scroll(root block);
  }

  @keyframes contactEnergize{
    0%,88%{
      border-color:rgba(192,0,255,.35);
      box-shadow:none;
    }
    94%{
      border-color:#e066ff;
      box-shadow:
        0 0 20px rgba(255,255,255,.18),
        0 0 55px rgba(224,102,255,.36),
        0 0 110px rgba(192,0,255,.22);
    }
    100%{
      border-color:#c000ff;
      box-shadow:
        0 0 35px rgba(192,0,255,.26),
        0 0 90px rgba(192,0,255,.12);
    }
  }
}

/* Visible energy traveling along the whole cable even without JS/scroll timelines */
#cablePathCore{
  stroke-dasharray:10 18;
  animation:coreFlow 1.2s linear infinite;
}

@keyframes coreFlow{
  to{stroke-dashoffset:-56}
}

/* A subtle idle spark at the final connector as a fallback */
.connection-flash{
  will-change:transform,opacity,filter;
}

@supports not (animation-timeline: scroll()) {
  .connection-flash{
    animation:fallbackSpark 3.4s ease-in-out infinite;
  }

  @keyframes fallbackSpark{
    0%,78%,100%{opacity:0;transform:translate(-50%,-50%) scale(.25)}
    84%{opacity:1;transform:translate(-50%,-50%) scale(1.2);filter:brightness(2)}
    89%{opacity:0;transform:translate(-50%,-50%) scale(.7)}
  }

  #cablePathLive{
    animation:fallbackCable 6s linear infinite;
  }

  @keyframes fallbackCable{
    0%{stroke-dashoffset:5600;opacity:.45}
    100%{stroke-dashoffset:0;opacity:1}
  }

  #cablePathGlow{
    animation:fallbackCableGlow 6s linear infinite;
  }

  @keyframes fallbackCableGlow{
    0%{stroke-dashoffset:5600;opacity:.06}
    100%{stroke-dashoffset:0;opacity:.40}
  }
}


/* ===== v8: real Stepsel logo + header cable connection ===== */

.brand.real-logo{
  width:225px;
  height:58px;
  display:flex;
  align-items:center;
  overflow:visible;
  padding:0;
}
.brand.real-logo img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:left center;
  display:block;
}

/* Contact CTA is the physical start point of the cable */
.nav-contact{
  position:relative;
  z-index:6;
}

/* short socket tail only — no floating bridge */
.nav-contact::after{
  content:"";
  position:absolute;
  left:50%;
  top:100%;
  transform:translateX(-50%);
  width:7px;
  height:12px;
  border-radius:0 0 5px 5px;
  background:#292930;
  border-left:1px solid rgba(255,255,255,.08);
  border-right:1px solid rgba(255,255,255,.05);
  box-shadow:
    inset 0 0 4px rgba(255,255,255,.06),
    0 0 8px rgba(192,0,255,.10);
}
/* Bring the main cable forward enough so the join reads as one cable */
.cable-layer{
  z-index:-1;
}

@media(max-width:900px){
  .brand.real-logo{
    width:185px;
    height:50px;
  }
}

@media(max-width:640px){
  .brand.real-logo{
    width:160px;
    height:45px;
  }
}


/* v9: clean header connection */
.nav-contact::before{
  content:"";
  position:absolute;
  left:50%;
  top:calc(100% + 10px);
  transform:translateX(-50%);
  width:4px;
  height:4px;
  border-radius:50%;
  background:#5e5e67;
  box-shadow:0 0 6px rgba(192,0,255,.18);
  transition:.25s ease;
}

.nav-contact.connected::after{
  background:#c000ff;
  box-shadow:
    0 0 6px #e066ff,
    0 0 16px rgba(192,0,255,.75);
}

.nav-contact.connected::before{
  background:#e066ff;
  box-shadow:
    0 0 7px #fff,
    0 0 14px #e066ff,
    0 0 24px #c000ff;
}


/* v9.1 — clean Contact CTA: nothing hanging underneath */
.nav-contact::before,
.nav-contact::after{
  content:none !important;
  display:none !important;
}


/* clean Contact CTA — no arrows, plugs, dots or hanging pseudo-elements */
.nav-contact::before,
.nav-contact::after,
.nav-contact .nav-status::before,
.nav-contact .nav-status::after{
  content:none !important;
  display:none !important;
}
.nav-contact{
  overflow:visible;
}


/* ===== v12 CLEAN BRAND MOTIF ===== */

/* Never show the old hazard / broken-cable marker */
.break-joint{display:none!important}

/* Hero: use the REAL round Stepsel mark from the supplied logo */
.logo-socket-bg{
  position:absolute!important;
  right:-34px!important;
  top:-42px!important;
  width:330px!important;
  height:330px!important;
  border-radius:50%!important;
  background:
    radial-gradient(circle at 48% 48%,rgba(192,0,255,.20),rgba(192,0,255,.07) 44%,transparent 72%)!important;
  filter:
    drop-shadow(0 0 18px rgba(224,102,255,.60))
    drop-shadow(0 0 42px rgba(192,0,255,.30))!important;
  opacity:.92!important;
  animation:float 5s ease-in-out infinite!important;
  display:grid!important;
  place-items:center!important;
  overflow:visible!important;
}
.logo-socket-bg img{
  width:94%!important;
  height:94%!important;
  object-fit:contain!important;
  display:block!important;
  opacity:.93!important;
  filter:
    drop-shadow(0 0 7px rgba(224,102,255,.85))
    drop-shadow(0 0 20px rgba(192,0,255,.48))!important;
}

/* Hide every old pseudo connector / arrow / plug on Contact */
.nav-contact::before,
.nav-contact::after,
.nav-contact .nav-status::before,
.nav-contact .nav-status::after{
  content:none!important;
  display:none!important;
}

/* Contact CTA + status are now two clean separate elements */
.nav-contact-wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  position:relative;
  overflow:visible;
}
.nav-contact{
  margin:0!important;
  position:relative!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-width:108px;
}
.nav-status{
  position:static!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  margin:0!important;
  padding:5px 9px!important;
  border-radius:999px!important;
  border:1px solid rgba(192,0,255,.22)!important;
  background:rgba(192,0,255,.055)!important;
  box-shadow:none!important;
  pointer-events:none;
  white-space:nowrap;
}
.nav-status i{
  width:6px!important;
  height:6px!important;
  border-radius:50%!important;
  background:#69656f!important;
  box-shadow:none!important;
}
.nav-status b{
  font-size:8px!important;
  letter-spacing:.12em!important;
  font-weight:850!important;
  color:#8e8994!important;
  line-height:1!important;
}

/* Connected state */
.nav-contact.connected + .nav-status,
.nav-contact-wrap:has(.nav-contact.connected) .nav-status{
  border-color:rgba(192,0,255,.46)!important;
  background:rgba(192,0,255,.10)!important;
}
.nav-contact.connected + .nav-status i,
.nav-contact-wrap:has(.nav-contact.connected) .nav-status i{
  background:#e066ff!important;
  box-shadow:0 0 7px #fff,0 0 13px #e066ff,0 0 22px #c000ff!important;
}
.nav-contact.connected + .nav-status b,
.nav-contact-wrap:has(.nav-contact.connected) .nav-status b{
  color:#efc4ff!important;
  text-shadow:0 0 10px rgba(192,0,255,.55)!important;
}

/* Header layout remains tidy with badge below CTA */
nav{
  align-items:flex-start!important;
}
.nav-contact-wrap{
  margin-top:-1px;
}

/* Mobile */
@media(max-width:640px){
  .logo-socket-bg{
    width:250px!important;
    height:250px!important;
    right:-52px!important;
    top:-30px!important;
  }
  .nav-status{
    padding:4px 7px!important;
  }
  .nav-status b{
    font-size:7px!important;
  }
}


/* v13 — cable begins directly under the header */
.cable-layer{
  top:0!important;
}

#cablePathBase,
#cablePathCore,
#cablePathLive,
#cablePathGlow{
  vector-effect:non-scaling-stroke;
}

/* Keep the full cable visible from its first pixel under the header */
#cablePathBase{opacity:1!important}
#cablePathCore{opacity:.72!important}


/* v14 — cable physically starts from the Contact CTA */
.contact-cable-start{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  z-index:44;
  pointer-events:none;
  overflow:visible;
}
.contact-start-base,
.contact-start-core,
.contact-start-live{
  fill:none;
  stroke-linecap:round;
}
.contact-start-base{
  stroke:#27272e;
  stroke-width:8;
}
.contact-start-core{
  stroke:#656570;
  stroke-width:2.2;
  stroke-dasharray:8 13;
  animation:coreFlow 1.15s linear infinite;
}
.contact-start-live{
  stroke:#d633ff;
  stroke-width:4.5;
  opacity:.48;
  filter:
    drop-shadow(0 0 4px rgba(255,255,255,.65))
    drop-shadow(0 0 10px rgba(224,102,255,.72))
    drop-shadow(0 0 20px rgba(192,0,255,.50));
}

/* no arrow/plug decorations on CTA */
.nav-contact::before,
.nav-contact::after{
  content:none!important;
  display:none!important;
}


/* ===== v15 — stronger Stepsel brand motif ===== */

/* Make the hero Stepsel socket icon more dominant */
.logo-socket-bg{
  right:-58px!important;
  top:-66px!important;
  width:410px!important;
  height:410px!important;
  opacity:.98!important;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(192,0,255,.24),
      rgba(192,0,255,.09) 43%,
      rgba(192,0,255,.025) 62%,
      transparent 74%)!important;
  filter:
    drop-shadow(0 0 22px rgba(224,102,255,.72))
    drop-shadow(0 0 56px rgba(192,0,255,.38))!important;
}

.logo-socket-bg img{
  width:96%!important;
  height:96%!important;
  opacity:1!important;
  filter:
    drop-shadow(0 0 8px rgba(255,255,255,.12))
    drop-shadow(0 0 12px rgba(224,102,255,.92))
    drop-shadow(0 0 28px rgba(192,0,255,.56))!important;
}

/* Shared subtle icon treatment in other sections */
.brand-mark-section{
  position:relative;
  overflow:visible;
}

.section-step-icon{
  position:absolute;
  pointer-events:none;
  user-select:none;
  z-index:-1;
  object-fit:contain;
  opacity:.055;
  filter:
    drop-shadow(0 0 18px rgba(192,0,255,.16))
    drop-shadow(0 0 42px rgba(192,0,255,.08));
}

/* Systems: large watermark behind the left side */
.section-step-icon-systems{
  width:430px;
  height:430px;
  left:-185px;
  top:30px;
  transform:rotate(-7deg);
  opacity:.045;
}

/* Process: smaller mark on the far right, near the cable */
.section-step-icon-process{
  width:285px;
  height:285px;
  right:-105px;
  top:70px;
  transform:rotate(9deg);
  opacity:.06;
}

/* Contact: faint energized mark behind the CTA copy */
.section-step-icon-contact{
  width:350px;
  height:350px;
  left:-125px;
  top:35px;
  opacity:.06;
  filter:
    drop-shadow(0 0 20px rgba(224,102,255,.22))
    drop-shadow(0 0 55px rgba(192,0,255,.14));
}

/* Slightly stronger contact mark after connection */
#contact .contact.connected ~ .section-step-icon-contact{
  opacity:.10;
}

@media(max-width:900px){
  .logo-socket-bg{
    width:340px!important;
    height:340px!important;
    right:-62px!important;
    top:-45px!important;
  }

  .section-step-icon-systems{
    width:320px;
    height:320px;
    left:-150px;
  }

  .section-step-icon-process{
    width:220px;
    height:220px;
    right:-90px;
  }

  .section-step-icon-contact{
    width:260px;
    height:260px;
    left:-115px;
  }
}

@media(max-width:640px){
  .logo-socket-bg{
    width:285px!important;
    height:285px!important;
    right:-72px!important;
    top:-28px!important;
  }

  .section-step-icon{
    opacity:.035!important;
  }

  .section-step-icon-systems{
    left:-120px;
  }

  .section-step-icon-process{
    right:-110px;
  }

  .section-step-icon-contact{
    left:-125px;
  }
}


/* v15.1 — heading spacing refinement */
.section-head .eyebrow{
  margin-bottom:12px!important;
}

.section-head h2{
  margin-top:0!important;
  margin-bottom:18px!important;
}

/* Keep the eyebrow + title visually as one heading block */
.section-head{
  display:flex;
  flex-direction:column;
  gap:0;
}


/* v15.2 — systems heading needs a little more breathing room */
#systems .eyebrow{
  margin-bottom:20px!important;
}

#systems h2{
  margin-top:0!important;
}


/* ===== v16.1 — technical callout + clean cable ===== */

/* Designed "PEALTNÄHA LIHTNE" block */
.tech-note{
  position:relative;
  margin-top:18px!important;
  padding:30px 32px!important;
  display:grid!important;
  grid-template-columns:190px 1fr!important;
  gap:32px!important;
  align-items:start!important;
  border:1px solid rgba(192,0,255,.30)!important;
  border-radius:22px!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 0% 0%,rgba(192,0,255,.12),transparent 38%),
    linear-gradient(135deg,rgba(192,0,255,.045),rgba(255,255,255,.012))!important;
  box-shadow:
    0 14px 45px rgba(0,0,0,.16),
    inset 0 0 35px rgba(192,0,255,.022)!important;
}

.tech-note::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:3px;
  background:linear-gradient(
    180deg,
    #e066ff,
    #c000ff 58%,
    rgba(192,0,255,.15)
  );
  box-shadow:
    0 0 12px rgba(224,102,255,.75),
    0 0 28px rgba(192,0,255,.38);
}

.tech-note::after{
  content:"</>";
  position:absolute;
  right:22px;
  top:18px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:46px;
  font-weight:700;
  letter-spacing:-.08em;
  color:rgba(192,0,255,.06);
  pointer-events:none;
}

.tech-note > span{
  position:relative;
  display:inline-flex!important;
  width:max-content;
  align-items:center;
  gap:9px;
  margin-top:2px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(192,0,255,.24);
  background:rgba(192,0,255,.07);
  color:#e9b6ff!important;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace!important;
  font-size:10px!important;
  font-weight:800!important;
  line-height:1!important;
  letter-spacing:.13em!important;
}

.tech-note > span::before{
  content:"";
  width:7px;
  height:7px;
  flex:0 0 7px;
  border-radius:50%;
  background:#c000ff;
  box-shadow:
    0 0 7px #e066ff,
    0 0 15px rgba(192,0,255,.75);
}

.tech-note p{
  position:relative;
  z-index:1;
  margin:0!important;
  max-width:800px!important;
  color:#c4c0c9!important;
  font-size:16px!important;
  line-height:1.72!important;
}

/* Remove the white moving keeper/dot completely */
#pulseDot,
.pulse-dot{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
}

/* Keep cable animation focused on the cable itself */
#cablePathLive{
  filter:
    drop-shadow(0 0 4px rgba(224,102,255,.65))
    drop-shadow(0 0 12px rgba(192,0,255,.60))
    drop-shadow(0 0 26px rgba(192,0,255,.32))!important;
}

@media(max-width:760px){
  .tech-note{
    grid-template-columns:1fr!important;
    gap:18px!important;
    padding:26px 24px!important;
  }

  .tech-note::after{
    font-size:36px;
    right:16px;
    top:14px;
  }
}



/* ===== v16.3 structural cleanup ===== */

/* The old white keeper/pulse is removed completely. */
#pulseDot,
.pulse-dot{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
}

/* Footer must always remain visible and above decorative layers. */
footer.wrap{
  position:relative!important;
  z-index:8!important;
  display:flex!important;
  align-items:center;
  justify-content:space-between;
  min-height:110px;
  margin-top:70px!important;
  padding:34px 0 48px!important;
  border-top:1px solid var(--line)!important;
  color:#817c88!important;
  font-size:12px!important;
  letter-spacing:.02em;
  background:transparent!important;
}

/* Keep decorative cable behind real content. */
.cable-layer{
  z-index:-1!important;
  pointer-events:none!important;
}

/* Technical callout remains fully styled. */
.tech-note{
  position:relative;
  margin-top:18px!important;
  padding:30px 32px!important;
  display:grid!important;
  grid-template-columns:190px 1fr!important;
  gap:32px!important;
  align-items:start!important;
  border:1px solid rgba(192,0,255,.30)!important;
  border-radius:22px!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 0% 0%,rgba(192,0,255,.12),transparent 38%),
    linear-gradient(135deg,rgba(192,0,255,.045),rgba(255,255,255,.012))!important;
  box-shadow:
    0 14px 45px rgba(0,0,0,.16),
    inset 0 0 35px rgba(192,0,255,.022)!important;
}
.tech-note::before{
  content:"";
  position:absolute;
  left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,#e066ff,#c000ff 58%,rgba(192,0,255,.15));
  box-shadow:0 0 12px rgba(224,102,255,.75),0 0 28px rgba(192,0,255,.38);
}
.tech-note::after{
  content:"</>";
  position:absolute;
  right:22px;top:18px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:46px;font-weight:700;letter-spacing:-.08em;
  color:rgba(192,0,255,.06);
  pointer-events:none;
}
.tech-note > span{
  position:relative;
  display:inline-flex!important;
  width:max-content;
  align-items:center;
  gap:9px;
  margin-top:2px;
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(192,0,255,.24);
  background:rgba(192,0,255,.07);
  color:#e9b6ff!important;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace!important;
  font-size:10px!important;
  font-weight:800!important;
  line-height:1!important;
  letter-spacing:.13em!important;
}
.tech-note > span::before{
  content:"";
  width:7px;height:7px;flex:0 0 7px;border-radius:50%;
  background:#c000ff;
  box-shadow:0 0 7px #e066ff,0 0 15px rgba(192,0,255,.75);
}
.tech-note p{
  position:relative;
  z-index:1;
  margin:0!important;
  max-width:800px!important;
  color:#c4c0c9!important;
  font-size:16px!important;
  line-height:1.72!important;
}

@media(max-width:760px){
  .tech-note{
    grid-template-columns:1fr!important;
    gap:18px!important;
    padding:26px 24px!important;
  }
  footer.wrap{
    min-height:90px;
    padding:28px 0 38px!important;
  }
}

/* ===== v16.6 CLEAN scroll electricity ===== */

/* Main cable remains calm and visible. */
#cablePathLive{
  stroke:#c000ff!important;
  stroke-width:4.7!important;
  opacity:.62!important;
  filter:
    drop-shadow(0 0 4px rgba(224,102,255,.42))
    drop-shadow(0 0 12px rgba(192,0,255,.34))!important;
}

/* Electricity exists as a separate dashed highlight.
   No infinite animation: JS moves it only when page scroll position changes. */
.cable-energy{
  fill:none!important;
  stroke:#f4c9ff!important;
  stroke-width:2.8!important;
  stroke-linecap:round!important;
  stroke-linejoin:round!important;
  stroke-dasharray:16 72!important;
  stroke-dashoffset:0;
  opacity:.20!important;
  filter:
    drop-shadow(0 0 3px rgba(255,255,255,.75))
    drop-shadow(0 0 7px rgba(224,102,255,.58))
    drop-shadow(0 0 15px rgba(192,0,255,.42))!important;
  transition:opacity .22s ease,filter .22s ease;
}

/* While actively scrolling, give the energy a small extra lift. */
body.cable-moving .cable-energy{
  opacity:.66!important;
  filter:
    brightness(1.25)
    drop-shadow(0 0 3px rgba(255,255,255,.9))
    drop-shadow(0 0 9px rgba(224,102,255,.76))
    drop-shadow(0 0 18px rgba(192,0,255,.56))!important;
}

body.cable-moving #cablePathGlow{
  opacity:.27!important;
}

/* Contact payoff */
#contact .contact{
  transition:border-color .4s ease,box-shadow .4s ease,transform .4s ease;
}

#contact .contact.connected{
  border-color:#c000ff!important;
  box-shadow:
    0 0 0 1px rgba(224,102,255,.14),
    0 0 34px rgba(192,0,255,.22),
    0 0 90px rgba(192,0,255,.10),
    inset 0 0 45px rgba(192,0,255,.035)!important;
}

#contact .contact.power-hit{
  animation:contactPowerHit .78s ease-out;
}

@keyframes contactPowerHit{
  0%{filter:brightness(1);transform:translateY(0)}
  18%{filter:brightness(1.55);transform:translateY(-3px)}
  38%{filter:brightness(1.06);transform:translateY(-1px)}
  52%{filter:brightness(1.28)}
  100%{filter:brightness(1);transform:translateY(0)}
}

/* One short spark only when connection is first made. */
.connection-flash{
  position:absolute;
  left:-29px;
  top:50%;
  width:84px;
  height:84px;
  transform:translate(-50%,-50%);
  pointer-events:none;
  z-index:10;
  opacity:0;
}

.connection-flash .zap-main{
  position:absolute;
  left:50%;top:50%;
  transform:translate(-50%,-50%) scale(.2) rotate(-12deg);
  font-size:36px;
  color:#fff;
  text-shadow:
    0 0 5px #fff,
    0 0 12px #e066ff,
    0 0 26px #c000ff,
    0 0 48px rgba(192,0,255,.72);
}

.zap-ring{
  position:absolute;
  inset:12px;
  border-radius:50%;
  border:2px solid rgba(224,102,255,.85);
  opacity:0;
  box-shadow:0 0 14px rgba(192,0,255,.48);
}

.zap-ring-2{inset:2px}

.connection-flash.fire{opacity:1}

.connection-flash.fire .zap-main{
  animation:singleZap .72s ease-out both;
}

.connection-flash.fire .zap-ring{
  animation:singleRing .76s ease-out both;
}

.connection-flash.fire .zap-ring-2{
  animation-delay:.07s;
}

@keyframes singleZap{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-15deg)}
  18%{opacity:1;transform:translate(-50%,-50%) scale(1.3) rotate(5deg);filter:brightness(2)}
  42%{opacity:.25;transform:translate(-50%,-50%) scale(.8)}
  55%{opacity:1;transform:translate(-50%,-50%) scale(1.03)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(.65);filter:brightness(1)}
}

@keyframes singleRing{
  0%{opacity:.8;transform:scale(.18)}
  100%{opacity:0;transform:scale(1.55)}
}


/* v16.7 — continuous cable through philosophy into contact */
#cablePathBase{
  stroke:#292930!important;
  stroke-width:9!important;
}
#cablePathLive{
  stroke-width:4.8!important;
}


/* ===== v16.8 — BIG connection moment, clean contact area ===== */

/* Remove old contact-side decorative junk completely */
.end-plug,
.connection-flash,
.form::before{
  display:none!important;
  content:none!important;
}

/* Event layer spans the whole contact card, but is invisible normally */
.connection-event{
  position:absolute;
  inset:0;
  z-index:20;
  pointer-events:none;
  overflow:hidden;
  opacity:0;
}

/* Bright center burst near the form edge */
.connection-burst{
  position:absolute;
  left:50%;
  top:50%;
  width:46px;
  height:46px;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.15);
  background:
    radial-gradient(circle,
      #fff 0 12%,
      #f2c8ff 18%,
      #e066ff 34%,
      #c000ff 52%,
      rgba(192,0,255,.25) 70%,
      transparent 78%);
  filter:
    blur(.2px)
    drop-shadow(0 0 8px #fff)
    drop-shadow(0 0 18px #e066ff)
    drop-shadow(0 0 42px #c000ff)
    drop-shadow(0 0 85px rgba(192,0,255,.75));
}

/* Two large energy waves expand across the contact section */
.connection-wave{
  position:absolute;
  left:50%;
  top:50%;
  width:120px;
  height:120px;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.15);
  border:2px solid rgba(224,102,255,.85);
  box-shadow:
    0 0 18px rgba(224,102,255,.45),
    inset 0 0 18px rgba(192,0,255,.18);
  opacity:0;
}

.wave-b{
  border-color:rgba(192,0,255,.45);
}

/* Small sparks */
.connection-sparks{
  position:absolute;
  left:50%;
  top:50%;
  width:1px;
  height:1px;
}

.connection-sparks i{
  position:absolute;
  width:4px;
  height:28px;
  border-radius:999px;
  background:linear-gradient(#fff,#e066ff,#c000ff);
  transform-origin:50% 72px;
  opacity:0;
  box-shadow:0 0 8px #e066ff,0 0 18px #c000ff;
}
.connection-sparks i:nth-child(1){transform:rotate(0deg) translateY(-72px)}
.connection-sparks i:nth-child(2){transform:rotate(45deg) translateY(-72px)}
.connection-sparks i:nth-child(3){transform:rotate(90deg) translateY(-72px)}
.connection-sparks i:nth-child(4){transform:rotate(135deg) translateY(-72px)}
.connection-sparks i:nth-child(5){transform:rotate(180deg) translateY(-72px)}
.connection-sparks i:nth-child(6){transform:rotate(225deg) translateY(-72px)}
.connection-sparks i:nth-child(7){transform:rotate(270deg) translateY(-72px)}
.connection-sparks i:nth-child(8){transform:rotate(315deg) translateY(-72px)}

/* Big text moment */
.connection-label{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%) scale(.9);
  padding:9px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(9,9,12,.72);
  backdrop-filter:blur(12px);
  color:#fff;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:12px;
  font-weight:900;
  letter-spacing:.18em;
  white-space:nowrap;
  opacity:0;
  text-shadow:0 0 12px rgba(224,102,255,.75);
  box-shadow:
    0 0 20px rgba(192,0,255,.24),
    inset 0 0 18px rgba(192,0,255,.04);
}

/* Fire sequence */
.connection-event.fire{
  opacity:1;
}

.connection-event.fire .connection-burst{
  animation:bigBurst .9s ease-out both;
}

.connection-event.fire .wave-a{
  animation:bigWave 1.0s ease-out both;
}

.connection-event.fire .wave-b{
  animation:bigWave 1.2s .08s ease-out both;
}

.connection-event.fire .connection-sparks i{
  animation:sparkShoot .75s ease-out both;
}

.connection-event.fire .connection-label{
  animation:labelHit 1.25s ease-out both;
}

@keyframes bigBurst{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.12);filter:brightness(1)}
  16%{opacity:1;transform:translate(-50%,-50%) scale(1.65);filter:brightness(2.4)}
  36%{opacity:.35;transform:translate(-50%,-50%) scale(.9)}
  52%{opacity:1;transform:translate(-50%,-50%) scale(1.15);filter:brightness(1.8)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(.7);filter:brightness(1)}
}

@keyframes bigWave{
  0%{opacity:.9;transform:translate(-50%,-50%) scale(.12)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(8)}
}

@keyframes sparkShoot{
  0%{opacity:0}
  20%{opacity:1}
  100%{opacity:0;filter:blur(.3px)}
}

@keyframes labelHit{
  0%,22%{opacity:0;transform:translate(-50%,-50%) scale(.84)}
  38%{opacity:1;transform:translate(-50%,-50%) scale(1.05)}
  72%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(.98)}
}

/* Whole contact section power-up */
#contact .contact.power-hit{
  animation:contactMegaHit 1.15s ease-out;
}

@keyframes contactMegaHit{
  0%{
    transform:translateY(0) scale(1);
    filter:brightness(1);
  }
  16%{
    transform:translateY(-5px) scale(1.012);
    filter:brightness(1.65);
    box-shadow:
      0 0 28px rgba(255,255,255,.12),
      0 0 70px rgba(224,102,255,.42),
      0 0 150px rgba(192,0,255,.25);
  }
  34%{
    transform:translateY(-2px) scale(1.004);
    filter:brightness(1.10);
  }
  50%{
    transform:translateY(-3px) scale(1.008);
    filter:brightness(1.32);
  }
  100%{
    transform:translateY(0) scale(1);
    filter:brightness(1);
  }
}

/* After connection, keep contact subtly energized */
#contact .contact.connected{
  border-color:rgba(192,0,255,.9)!important;
  box-shadow:
    0 0 0 1px rgba(224,102,255,.12),
    0 0 34px rgba(192,0,255,.22),
    0 0 90px rgba(192,0,255,.10),
    inset 0 0 55px rgba(192,0,255,.045)!important;
}

/* Make the form CTA itself feel energized once connected */
#contact .contact.connected .submit{
  box-shadow:
    0 0 18px rgba(224,102,255,.26),
    0 0 42px rgba(192,0,255,.18)!important;
}

@media(max-width:700px){
  .connection-label{
    font-size:10px;
    letter-spacing:.12em;
  }
  .connection-wave{
    width:90px;
    height:90px;
  }
}


/* v16.9 — vertically center the regular header nav links */
header nav > a:not(.nav-contact){
  margin-top:8px!important;
}

/* Keep the Contact CTA/status group visually balanced with them */
.nav-contact-wrap{
  margin-top:0!important;
}


/* v17 — header items on one true centered row */
header .wrap{
  display:flex!important;
  align-items:center!important;
}

header nav{
  display:flex!important;
  align-items:center!important;
  align-self:stretch!important;
  gap:24px;
}

/* Undo previous manual vertical offsets */
header nav > a:not(.nav-contact),
.nav-contact-wrap,
.nav-contact{
  margin-top:0!important;
  margin-bottom:0!important;
}

/* Every main nav item shares the same visual center line */
header nav > a:not(.nav-contact){
  display:flex!important;
  align-items:center!important;
  height:100%!important;
}

/* Contact button itself sits on exactly the same row */
.nav-contact-wrap{
  align-self:center!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:6px!important;
}

/* Status remains below CTA without pushing the other links upward */
.nav-contact-wrap .nav-status{
  position:absolute!important;
  top:calc(50% + 24px)!important;
  left:50%!important;
  transform:translateX(-50%)!important;
}

/* Contact CTA aligned to the same center axis as Teenused / Süsteemid */
.nav-contact{
  align-self:center!important;
}


/* v17.1 — scroll-driven electric arrow on the cable */
.electric-arrow{
  opacity:0;
  pointer-events:none;
  transition:opacity .16s ease;
  filter:
    drop-shadow(0 0 3px #fff)
    drop-shadow(0 0 8px #e066ff)
    drop-shadow(0 0 16px rgba(192,0,255,.75));
}

.electric-arrow path{
  fill:none;
  stroke:#f6d4ff;
  stroke-width:3.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

body.cable-moving .electric-arrow{
  opacity:.92;
}


/* v17.2 — arrow is the actual energized cable tip */
.electric-arrow{
  opacity:0;
  pointer-events:none;
  transition:opacity .18s ease, filter .18s ease;
  filter:
    drop-shadow(0 0 3px #fff)
    drop-shadow(0 0 9px #e066ff)
    drop-shadow(0 0 18px rgba(192,0,255,.82));
}

.electric-arrow path{
  fill:none;
  stroke:#f8ddff;
  stroke-width:3.4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* small connector body behind the chevrons */
.electric-arrow::before{
  content:"";
}

/* once cable starts, the tip remains visible even when scrolling stops */
body.cable-started .electric-arrow{
  opacity:.96;
}

/* while actively scrolling, it gets a little brighter */
body.cable-moving .electric-arrow{
  opacity:1;
  filter:
    brightness(1.28)
    drop-shadow(0 0 4px #fff)
    drop-shadow(0 0 11px #e066ff)
    drop-shadow(0 0 22px rgba(192,0,255,.92));
}

/* Connected = tip has entered the socket */
body.cable-connected .electric-arrow{
  opacity:0!important;
}


/* ===== v17.3 — plug tip + destination socket ===== */

/* Replace chevron arrow styling with a real plug head */
.electric-arrow.plug-tip{
  opacity:0;
  pointer-events:none;
  transform-box:fill-box;
  transform-origin:center;
  transition:opacity .18s ease,filter .18s ease;
  filter:
    drop-shadow(0 0 4px rgba(255,255,255,.45))
    drop-shadow(0 0 10px rgba(224,102,255,.78))
    drop-shadow(0 0 22px rgba(192,0,255,.72));
}

body.cable-started .electric-arrow.plug-tip{
  opacity:1;
}

body.cable-moving .electric-arrow.plug-tip{
  opacity:1;
  filter:
    brightness(1.18)
    drop-shadow(0 0 4px rgba(255,255,255,.65))
    drop-shadow(0 0 12px rgba(224,102,255,.88))
    drop-shadow(0 0 24px rgba(192,0,255,.82));
}

body.cable-connected .electric-arrow.plug-tip{
  opacity:0!important;
}

.plug-neck{
  fill:none;
  stroke:#c000ff;
  stroke-width:7;
  stroke-linecap:round;
}

.plug-body{
  fill:#222229;
  stroke:#d633ff;
  stroke-width:2;
}

.plug-core{
  fill:#c000ff;
  opacity:.86;
  filter:drop-shadow(0 0 5px #e066ff);
}

.plug-pin{
  fill:#d7d7df;
  stroke:#9f9fa8;
  stroke-width:.8;
}

/* The destination: the same Stepsel socket icon faintly behind contact */
.contact-socket-bg{
  position:absolute;
  right:-40px;
  top:50%;
  width:380px;
  height:380px;
  transform:translateY(-50%) scale(.96);
  object-fit:contain;
  pointer-events:none;
  user-select:none;
  opacity:.055;
  z-index:0;
  filter:
    drop-shadow(0 0 18px rgba(224,102,255,.18))
    drop-shadow(0 0 48px rgba(192,0,255,.12));
  transition:
    opacity .45s ease,
    transform .45s ease,
    filter .45s ease;
}

/* Keep real contact content above the socket watermark */
.contact-copy,
.form,
.connection-event{
  position:relative;
  z-index:2;
}

/* As the user gets closer, the socket becomes subtly more visible */
#contact .contact{
  background:
    radial-gradient(circle at 82% 50%,rgba(192,0,255,.045),transparent 30%),
    radial-gradient(circle at 0 0,rgba(192,0,255,.13),transparent 35%),
    linear-gradient(145deg,rgba(192,0,255,.025),rgba(18,18,22,.84))!important;
}

#contact .contact.connected .contact-socket-bg{
  opacity:.15;
  transform:translateY(-50%) scale(1.03);
  filter:
    drop-shadow(0 0 12px rgba(255,255,255,.12))
    drop-shadow(0 0 28px rgba(224,102,255,.42))
    drop-shadow(0 0 70px rgba(192,0,255,.26));
}

/* In connected state the whole destination gets a little more purple */
#contact .contact.connected{
  background:
    radial-gradient(circle at 82% 50%,rgba(192,0,255,.14),transparent 34%),
    radial-gradient(circle at 0 0,rgba(192,0,255,.14),transparent 36%),
    linear-gradient(145deg,rgba(192,0,255,.045),rgba(18,18,22,.88))!important;
}

/* make contact copy area a bit calmer so socket motif reads */
#contact .contact-copy{
  position:relative;
  z-index:3;
}

/* The existing connection event stays the big payoff */
.connection-event{
  z-index:20;
}

@media(max-width:900px){
  .contact-socket-bg{
    width:300px;
    height:300px;
    right:-70px;
    opacity:.045;
  }
}

@media(max-width:640px){
  .contact-socket-bg{
    width:240px;
    height:240px;
    right:-82px;
    top:44%;
  }
}


/* ===== v17.4 — big centered contact socket + visible flash ===== */

/* Big centered Stepsel socket behind the form */
.contact-socket-bg{
  left:50%!important;
  right:auto!important;
  top:50%!important;
  width:620px!important;
  height:620px!important;
  transform:translate(-50%,-50%) scale(.96)!important;
  opacity:.075!important;
  z-index:0!important;
  filter:
    drop-shadow(0 0 24px rgba(224,102,255,.18))
    drop-shadow(0 0 70px rgba(192,0,255,.13))!important;
}

/* As user reaches contact, socket powers up */
#contact .contact.connected .contact-socket-bg{
  opacity:.22!important;
  transform:translate(-50%,-50%) scale(1.045)!important;
  filter:
    brightness(1.22)
    drop-shadow(0 0 16px rgba(255,255,255,.16))
    drop-shadow(0 0 38px rgba(224,102,255,.58))
    drop-shadow(0 0 95px rgba(192,0,255,.38))!important;
}

/* Put the connection event exactly at the socket center */
.connection-event{
  position:absolute!important;
  inset:0!important;
  z-index:30!important;
  pointer-events:none!important;
  overflow:hidden!important;
}

/* Much stronger central flash */
.connection-burst{
  left:50%!important;
  top:50%!important;
  width:88px!important;
  height:88px!important;
  background:
    radial-gradient(circle,
      #fff 0 9%,
      #fff 10% 14%,
      #f5d8ff 18%,
      #e066ff 30%,
      #c000ff 46%,
      rgba(192,0,255,.38) 62%,
      transparent 76%)!important;
  filter:
    drop-shadow(0 0 10px #fff)
    drop-shadow(0 0 26px #e066ff)
    drop-shadow(0 0 60px #c000ff)
    drop-shadow(0 0 130px rgba(192,0,255,.92))!important;
}

/* Bigger waves so the whole contact section reacts */
.connection-wave{
  left:50%!important;
  top:50%!important;
  width:160px!important;
  height:160px!important;
  border-width:3px!important;
  border-color:rgba(236,185,255,.9)!important;
  box-shadow:
    0 0 22px rgba(224,102,255,.65),
    0 0 48px rgba(192,0,255,.30),
    inset 0 0 22px rgba(192,0,255,.24)!important;
}

/* Extra white flash overlay */
#contact .contact::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:25;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(circle at 50% 50%,
      rgba(255,255,255,.70) 0%,
      rgba(236,190,255,.26) 12%,
      rgba(192,0,255,.12) 28%,
      transparent 52%);
}

/* Trigger a one-shot full-card flash */
#contact .contact.power-hit::after{
  animation:contactWhiteFlash .95s ease-out both;
}

@keyframes contactWhiteFlash{
  0%{opacity:0}
  12%{opacity:1}
  28%{opacity:.18}
  40%{opacity:.62}
  100%{opacity:0}
}

/* Stronger main burst timing */
@keyframes bigBurst{
  0%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.08);
    filter:brightness(1);
  }
  12%{
    opacity:1;
    transform:translate(-50%,-50%) scale(2.0);
    filter:brightness(2.8);
  }
  28%{
    opacity:.22;
    transform:translate(-50%,-50%) scale(.9);
  }
  42%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1.3);
    filter:brightness(2.2);
  }
  100%{
    opacity:0;
    transform:translate(-50%,-50%) scale(.72);
    filter:brightness(1);
  }
}

@keyframes bigWave{
  0%{
    opacity:1;
    transform:translate(-50%,-50%) scale(.08);
  }
  100%{
    opacity:0;
    transform:translate(-50%,-50%) scale(9);
  }
}

/* Contact form and copy stay readable above the giant socket */
.contact-copy,
.form{
  position:relative!important;
  z-index:5!important;
}

/* slightly stronger purple tint behind form even before connection */
#contact .contact{
  background:
    radial-gradient(circle at 50% 50%,rgba(192,0,255,.06),transparent 40%),
    radial-gradient(circle at 0 0,rgba(192,0,255,.13),transparent 35%),
    linear-gradient(145deg,rgba(192,0,255,.025),rgba(18,18,22,.86))!important;
}

#contact .contact.connected{
  background:
    radial-gradient(circle at 50% 50%,rgba(192,0,255,.17),transparent 44%),
    radial-gradient(circle at 0 0,rgba(192,0,255,.14),transparent 36%),
    linear-gradient(145deg,rgba(192,0,255,.055),rgba(18,18,22,.90))!important;
}

@media(max-width:900px){
  .contact-socket-bg{
    width:500px!important;
    height:500px!important;
  }
}

@media(max-width:640px){
  .contact-socket-bg{
    width:380px!important;
    height:380px!important;
  }
  .connection-wave{
    width:120px!important;
    height:120px!important;
  }
}


/* ===== v17.5 — hero system connection states ===== */

.code-body .system-row{
  position:relative;
  transition:
    background .28s ease,
    border-color .28s ease,
    transform .28s ease,
    opacity .28s ease;
}

.code-body .system-row::before{
  content:"";
  position:absolute;
  left:-8px;
  top:50%;
  width:5px;
  height:5px;
  border-radius:50%;
  transform:translateY(-50%);
  background:#4d4d54;
  opacity:.55;
  transition:.25s ease;
}

.code-body .system-row b{
  min-width:112px;
  text-align:right;
  transition:
    color .22s ease,
    text-shadow .22s ease,
    transform .22s ease,
    opacity .22s ease;
}

/* inactive */
.code-body .system-row.state-waiting{
  opacity:.58;
}

.code-body .system-row.state-waiting b{
  color:#696970!important;
  text-shadow:none!important;
}

/* currently connecting */
.code-body .system-row.state-connecting{
  opacity:1;
  transform:translateX(3px);
  background:
    linear-gradient(90deg,rgba(192,0,255,.00),rgba(192,0,255,.055),rgba(192,0,255,.00));
}

.code-body .system-row.state-connecting::before{
  background:#e066ff;
  opacity:1;
  box-shadow:
    0 0 7px #e066ff,
    0 0 15px rgba(192,0,255,.75);
  animation:rowPulse .72s ease-in-out infinite alternate;
}

.code-body .system-row.state-connecting b{
  color:#f0b9ff!important;
  text-shadow:
    0 0 9px rgba(224,102,255,.72),
    0 0 18px rgba(192,0,255,.42)!important;
  animation:textPulse .72s ease-in-out infinite alternate;
}

/* finished */
.code-body .system-row.state-connected{
  opacity:1;
}

.code-body .system-row.state-connected::before{
  background:#c000ff;
  opacity:1;
  box-shadow:
    0 0 6px #e066ff,
    0 0 13px rgba(192,0,255,.62);
}

.code-body .system-row.state-connected b{
  color:#d97bff!important;
  text-shadow:0 0 11px rgba(192,0,255,.38)!important;
}

@keyframes rowPulse{
  from{transform:translateY(-50%) scale(.8);filter:brightness(1)}
  to{transform:translateY(-50%) scale(1.25);filter:brightness(1.45)}
}

@keyframes textPulse{
  from{opacity:.68}
  to{opacity:1}
}

/* small "scan" flash when a row completes */
.code-body .system-row.just-connected{
  animation:rowComplete .55s ease-out;
}

@keyframes rowComplete{
  0%{
    background:rgba(192,0,255,.18);
    box-shadow:inset 0 0 18px rgba(192,0,255,.15);
  }
  100%{
    background:transparent;
    box-shadow:none;
  }
}


/* ===== PRODUCTION CLEANUP v20 ===== */

html, body{
  min-height:100%;
}

body{
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img, svg{
  max-width:100%;
}

/* Keep the main cable visible and scalable */
.cable-layer{
  position:absolute!important;
  left:0!important;
  top:0!important;
  width:100%!important;
  height:100%!important;
  pointer-events:none!important;
  z-index:-1!important;
}

.cable-layer svg{
  width:100%!important;
  height:100%!important;
  overflow:visible!important;
}

/* Avoid layout jank on mobile */
@media(max-width:700px){
  .header-inner{
    width:min(var(--max),calc(100% - 28px))!important;
  }

  header{
    height:72px!important;
  }

  .brand.real-logo{
    width:150px!important;
    height:44px!important;
  }

  nav{
    gap:10px!important;
  }

  nav > a:not(.nav-contact),
  .nav-contact-wrap{
    font-size:12px!important;
  }

  .nav-contact{
    padding:9px 12px!important;
    min-width:auto!important;
  }

  .nav-status{
    font-size:7px!important;
  }

  .hero{
    padding-top:120px!important;
    gap:34px!important;
  }

  .hero-card{
    min-height:390px!important;
  }

  .logo-socket-bg{
    width:280px!important;
    height:280px!important;
    right:-70px!important;
    top:-30px!important;
  }

  .section{
    padding:78px 0!important;
  }

  .contact{
    padding:28px 20px!important;
    gap:28px!important;
  }

  .contact-socket-bg{
    width:340px!important;
    height:340px!important;
  }

  .connection-wave{
    width:110px!important;
    height:110px!important;
  }

  .connection-burst{
    width:70px!important;
    height:70px!important;
  }
}

/* Respect reduced-motion users */
@media(prefers-reduced-motion:reduce){
  *,
  *::before,
  *::after{
    scroll-behavior:auto!important;
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
}

/* ===== v21 LIVE MOBILE / HEADER FIXES ===== */

/* Prevent iOS/Android sideways drag and white overscroll edges */
html{
  width:100%;
  max-width:100%;
  overflow-x:hidden !important;
  background:#0d0d0f !important;
  overscroll-behavior-x:none;
}

body{
  width:100%;
  max-width:100%;
  overflow-x:hidden !important;
  background:#0d0d0f !important;
  overscroll-behavior-x:none;
}

.site{
  position:relative;
  width:100%;
  max-width:100%;
  overflow-x:hidden !important;
  background:#0d0d0f;
}

/* Modern browsers: clip is stronger than hidden for positioned visual elements */
@supports (overflow:clip){
  html,
  body,
  .site{
    overflow-x:clip !important;
  }
}

/* Header must visually cover everything scrolling underneath it */
header,
header.scrolled{
  background:#0d0d0f !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
  box-shadow:0 8px 28px rgba(0,0,0,.16);
}

/* Make sure no old header bridge can ever reappear */
.contact-cable-start{
  display:none !important;
}

/* The plug must sit visually ON TOP of the cable */
.electric-arrow.plug-tip{
  isolation:isolate;
}

.plug-body{
  fill:#202026 !important;
  stroke:#d633ff !important;
  stroke-width:2.2 !important;
}

.plug-neck{
  stroke:#c000ff !important;
  stroke-width:7 !important;
}

.plug-pin{
  fill:#e1e1e8 !important;
  stroke:#9d9da7 !important;
}

/* Contain wide decorative sections/icons */
.wrap,
.section,
.hero,
.contact,
.hero-card,
.brand-mark-section{
  max-width:100%;
}

@media(max-width:700px){
  html,
  body,
  .site{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }

  @supports (overflow:clip){
    html,
    body,
    .site{
      overflow-x:clip !important;
    }
  }

  /* Absolute branding can extend visually, but may not create page width */
  .section-step-icon,
  .logo-socket-bg,
  .contact-socket-bg{
    max-width:none !important;
  }

  header,
  header.scrolled{
    background:#0d0d0f !important;
  }
}


/* ===== v22 SCALE / PLUG / PHILOSOPHY FIXES ===== */

/* Philosophy statement should not overpower the page */
.quote h2{
  font-size:clamp(30px,3.7vw,50px) !important;
  line-height:1.12 !important;
  max-width:980px;
}

/* Specifically keep STEPSEL FILOSOOFIA a little calmer */
.quote .kicker + h2{
  margin-top:20px !important;
}

/* Undo the "same px thickness everywhere" behavior from v21 */
#cablePathBase,
#cablePathCore,
#cablePathLive,
#cablePathGlow,
#cableEnergy{
  vector-effect:none !important;
}

/* Desktop cable: stronger / more physical */
#cablePathBase{
  stroke-width:10 !important;
}
#cablePathCore{
  stroke-width:2.4 !important;
}
#cablePathLive{
  stroke-width:5.2 !important;
}
#cablePathGlow{
  stroke-width:15 !important;
}
#cableEnergy{
  stroke-width:3.0 !important;
}

/* Plug should remain readable and above all cable strokes */
.electric-arrow.plug-tip{
  opacity:0;
  pointer-events:none;
  filter:
    drop-shadow(0 0 4px rgba(255,255,255,.45))
    drop-shadow(0 0 10px rgba(224,102,255,.8))
    drop-shadow(0 0 22px rgba(192,0,255,.72)) !important;
}

body.cable-started .electric-arrow.plug-tip{
  opacity:1 !important;
}

body.cable-connected .electric-arrow.plug-tip{
  opacity:0 !important;
}

/* On phones the cable should be visibly slimmer */
@media(max-width:700px){
  #cablePathBase{
    stroke-width:5.4 !important;
  }
  #cablePathCore{
    stroke-width:1.5 !important;
  }
  #cablePathLive{
    stroke-width:3.2 !important;
  }
  #cablePathGlow{
    stroke-width:9 !important;
  }
  #cableEnergy{
    stroke-width:2.0 !important;
  }

  .quote h2{
    font-size:clamp(26px,8vw,36px) !important;
    line-height:1.14 !important;
  }
}

@media(min-width:701px) and (max-width:1100px){
  #cablePathBase{stroke-width:8 !important}
  #cablePathLive{stroke-width:4.3 !important}
  #cablePathGlow{stroke-width:12 !important}
  #cableEnergy{stroke-width:2.5 !important}
}


/* ===== v23 HEADER / HERO / PLUG / SCROLL SYNC ===== */

/* Less empty air under the header on desktop */
.hero{
  padding-top:112px !important;
}

/* Slightly larger brand mark in header */
.brand.real-logo{
  width:248px !important;
  height:64px !important;
}

/* Keep header nicely balanced around larger logo */
header{
  height:82px !important;
}
.header-inner{
  min-height:82px;
  align-items:center !important;
}

/* Clean vector plug */
.electric-arrow.plug-tip{
  opacity:0;
  pointer-events:none;
  transform-box:fill-box;
  transform-origin:center;
  filter:
    drop-shadow(0 0 3px rgba(255,255,255,.34))
    drop-shadow(0 0 9px rgba(224,102,255,.74))
    drop-shadow(0 0 20px rgba(192,0,255,.62)) !important;
}

body.cable-started .electric-arrow.plug-tip{
  opacity:1 !important;
}

body.cable-connected .electric-arrow.plug-tip{
  opacity:0 !important;
}

.plug-neck{
  fill:none !important;
  stroke:#c000ff !important;
  stroke-width:7 !important;
  stroke-linecap:round;
}

.plug-relief{
  fill:#292930 !important;
  stroke:#b52de8 !important;
  stroke-width:1.4 !important;
}

.plug-body{
  fill:#202027 !important;
  stroke:#d94bff !important;
  stroke-width:2 !important;
}

.plug-inset{
  fill:#16161b !important;
  stroke:rgba(255,255,255,.12) !important;
  stroke-width:1 !important;
}

.plug-pin{
  fill:#e1e1e7 !important;
  stroke:#a3a3ad !important;
  stroke-width:.8 !important;
}

.plug-core{
  fill:#c000ff !important;
  filter:
    drop-shadow(0 0 4px #e066ff)
    drop-shadow(0 0 9px rgba(192,0,255,.72));
}

/* Desktop cable should look slightly more substantial than mobile */
#cablePathBase{stroke-width:10 !important}
#cablePathLive{stroke-width:5 !important}
#cablePathGlow{stroke-width:14 !important}
#cableEnergy{stroke-width:2.8 !important}

@media(max-width:700px){
  header{
    height:72px !important;
  }

  .header-inner{
    min-height:72px;
  }

  /* Larger than before, but still fits */
  .brand.real-logo{
    width:166px !important;
    height:48px !important;
  }

  /* Reduce top gap on phone too */
  .hero{
    padding-top:94px !important;
  }

  /* noticeably slimmer mobile cable */
  #cablePathBase{stroke-width:5.2 !important}
  #cablePathLive{stroke-width:3 !important}
  #cablePathGlow{stroke-width:8.5 !important}
  #cableEnergy{stroke-width:1.8 !important}
}

@media(min-width:701px) and (max-width:1100px){
  .brand.real-logo{
    width:220px !important;
    height:58px !important;
  }

  .hero{
    padding-top:105px !important;
  }
}


/* ===== v24 — plug arrives visibly with the user ===== */

/* Contact socket starts to reveal before actual connection,
   giving the moving plug a clear visual destination. */
#contact .contact{
  --socket-approach:0;
}

#contact .contact.approaching .contact-socket-bg{
  opacity:.13 !important;
  filter:
    drop-shadow(0 0 20px rgba(224,102,255,.24))
    drop-shadow(0 0 56px rgba(192,0,255,.16)) !important;
}

#contact .contact.approaching{
  border-color:rgba(192,0,255,.48) !important;
  box-shadow:
    0 0 28px rgba(192,0,255,.08),
    inset 0 0 40px rgba(192,0,255,.025) !important;
}


/* ===== v26 — restore v24 desktop logic, hide plug only on mobile ===== */
@media(max-width:700px){
  .electric-arrow.plug-tip{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
  }
}


/* ===== v27 FINAL ANIMATION QA ===== */

/* First hero state is intentionally active immediately. */
.code-body .system-row.state-connecting b{
  min-width:118px;
}

/* Dots breathe instead of looking like static placeholder copy. */
.code-body .system-row.state-connecting b{
  animation:heroConnectingBreath .8s ease-in-out infinite alternate !important;
}

@keyframes heroConnectingBreath{
  from{opacity:.62;filter:brightness(.92)}
  to{opacity:1;filter:brightness(1.28)}
}

/* Destination is only softly hinted before the user reaches it. */
#contact .contact.approaching .contact-socket-bg{
  opacity:.12 !important;
  transform:translate(-50%,-50%) scale(1.0) !important;
}

#contact .contact.approaching{
  border-color:rgba(192,0,255,.42) !important;
}

/* Keep the final event fully hidden until JS explicitly fires it. */
.connection-event:not(.fire){
  opacity:0 !important;
}

/* Mobile: no moving plug; contact event still works when form is reached. */
@media(max-width:700px){
  .electric-arrow.plug-tip{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
  }
}


/* ===== v28 — NO MOVING PLUG, SCROLL-DRIVEN ELECTRIC FLOW ===== */

/* Remove every leftover plug style / visual */
.electric-arrow,
.plug-tip,
.plug-neck,
.plug-body,
.plug-relief,
.plug-inset,
.plug-pin,
.plug-core{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
}

/* The physical cable remains visible all the time */
#cablePathBase{
  opacity:.96 !important;
  stroke:#28282f !important;
}

#cablePathCore{
  opacity:.58 !important;
}

/* Calm purple energized section */
#cablePathLive{
  stroke:#c000ff !important;
  opacity:.68 !important;
  filter:
    drop-shadow(0 0 4px rgba(224,102,255,.42))
    drop-shadow(0 0 11px rgba(192,0,255,.34)) !important;
}

/* The electricity itself: bright dashed highlight */
#cableEnergy{
  fill:none !important;
  stroke:#f6d8ff !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
  stroke-dasharray:20 78 !important;
  opacity:.24 !important;
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.82))
    drop-shadow(0 0 7px rgba(224,102,255,.58))
    drop-shadow(0 0 15px rgba(192,0,255,.42)) !important;
  transition:
    opacity .18s ease,
    filter .18s ease;
}

/* Only while user is actively scrolling, electricity becomes brighter */
body.cable-moving #cableEnergy{
  opacity:.84 !important;
  filter:
    brightness(1.28)
    drop-shadow(0 0 3px #fff)
    drop-shadow(0 0 9px rgba(224,102,255,.88))
    drop-shadow(0 0 20px rgba(192,0,255,.68)) !important;
}

body.cable-moving #cablePathGlow{
  opacity:.28 !important;
}

/* Contact still becomes the payoff */
#contact .contact.approaching .contact-socket-bg{
  opacity:.13 !important;
}

#contact .contact.connected .contact-socket-bg{
  opacity:.22 !important;
}

/* Slightly calmer cable on phones */
@media(max-width:700px){
  #cablePathBase{
    stroke-width:5.2 !important;
  }

  #cablePathLive{
    stroke-width:3.1 !important;
  }

  #cablePathGlow{
    stroke-width:8.5 !important;
  }

  #cableEnergy{
    stroke-width:1.9 !important;
    stroke-dasharray:16 66 !important;
  }
}


/* =========================================================
   STEPSEL FINAL v29
   compact layout + responsive cable + scroll spark
========================================================= */

/* Tighter overall rhythm */
.hero{
  min-height:760px !important;
  padding-top:102px !important;
  padding-bottom:72px !important;
}

.section{
  padding:84px 0 !important;
}

.section-head{
  margin-bottom:40px !important;
}

.quote{
  padding:48px 50px !important;
}

.contact{
  margin-top:20px !important;
}

footer{
  margin-top:54px !important;
}

/* Philosophy should be strong, not gigantic */
.quote h2{
  font-size:clamp(30px,3.5vw,48px) !important;
  line-height:1.12 !important;
}

/* Cable now uses an actual viewport-sized coordinate system from JS.
   No non-uniform SVG scaling tricks. */
.cable-layer{
  position:absolute !important;
  inset:0 auto auto 0 !important;
  width:100% !important;
  pointer-events:none !important;
  overflow:hidden !important;
  z-index:-1 !important;
}

#cableSvg{
  display:block !important;
  width:100% !important;
  overflow:visible !important;
}

#cablePathBase,
#cablePathCore,
#cablePathGlow,
#cablePathLive,
#cableEnergy{
  vector-effect:non-scaling-stroke !important;
  fill:none !important;
  stroke-linecap:round !important;
  stroke-linejoin:round !important;
}

/* Entire physical cable is always visible */
#cablePathBase{
  stroke:#292930 !important;
  stroke-width:8 !important;
  opacity:.92 !important;
}

#cablePathCore{
  stroke:#64646e !important;
  stroke-width:1.7 !important;
  opacity:.45 !important;
}

/* Purple powered portion grows with scroll */
#cablePathLive{
  stroke:#c000ff !important;
  stroke-width:4.2 !important;
  opacity:.72 !important;
  filter:
    drop-shadow(0 0 4px rgba(224,102,255,.46))
    drop-shadow(0 0 11px rgba(192,0,255,.38)) !important;
}

#cablePathGlow{
  stroke:#c000ff !important;
  stroke-width:12 !important;
  opacity:.12 !important;
  filter:blur(5px) !important;
}

/* Small electricity moving through the already-powered line */
#cableEnergy{
  stroke:#f6d8ff !important;
  stroke-width:2.2 !important;
  stroke-dasharray:12 54 !important;
  opacity:.16 !important;
  filter:
    drop-shadow(0 0 2px rgba(255,255,255,.75))
    drop-shadow(0 0 6px rgba(224,102,255,.54))
    drop-shadow(0 0 13px rgba(192,0,255,.38)) !important;
  transition:opacity .16s ease,filter .16s ease;
}

body.cable-moving #cableEnergy{
  opacity:.72 !important;
  filter:
    brightness(1.22)
    drop-shadow(0 0 3px rgba(255,255,255,.95))
    drop-shadow(0 0 8px rgba(224,102,255,.80))
    drop-shadow(0 0 17px rgba(192,0,255,.58)) !important;
}

body.cable-moving #cablePathGlow{
  opacity:.22 !important;
}

/* Vector spark at the exact end of powered cable */
.cable-spark{
  pointer-events:none;
  opacity:.30;
  transition:opacity .16s ease,filter .16s ease;
  filter:
    drop-shadow(0 0 4px rgba(255,255,255,.55))
    drop-shadow(0 0 10px rgba(224,102,255,.70))
    drop-shadow(0 0 20px rgba(192,0,255,.56));
}

body.cable-moving .cable-spark{
  opacity:1;
  filter:
    brightness(1.28)
    drop-shadow(0 0 5px #fff)
    drop-shadow(0 0 12px rgba(224,102,255,.92))
    drop-shadow(0 0 24px rgba(192,0,255,.74));
}

body.cable-connected .cable-spark{
  opacity:0 !important;
}

.spark-halo{
  fill:rgba(192,0,255,.22);
  stroke:rgba(224,102,255,.62);
  stroke-width:1.2;
}

.spark-core{
  fill:#fff;
  stroke:#e066ff;
  stroke-width:2;
}

.spark-rays{
  fill:none;
  stroke:#f6d8ff;
  stroke-width:2.2;
  stroke-linecap:round;
}

/* Hero connection story remains visually active */
.code-body .system-row.state-connecting{
  background:
    linear-gradient(90deg,rgba(192,0,255,0),rgba(192,0,255,.07),rgba(192,0,255,0)) !important;
}

.code-body .system-row.state-connecting b{
  animation:heroConnectingBreath .72s ease-in-out infinite alternate !important;
}

@keyframes heroConnectingBreath{
  from{opacity:.58;filter:brightness(.9)}
  to{opacity:1;filter:brightness(1.3)}
}

/* Contact payoff stays completely dormant until the real arrival */
.connection-event:not(.fire){
  opacity:0 !important;
}

#contact .contact.approaching .contact-socket-bg{
  opacity:.13 !important;
}

#contact .contact.connected .contact-socket-bg{
  opacity:.22 !important;
}

/* Mobile layout */
@media(max-width:700px){
  .hero{
    min-height:auto !important;
    padding-top:88px !important;
    padding-bottom:54px !important;
    gap:26px !important;
  }

  .section{
    padding:58px 0 !important;
  }

  .section-head{
    margin-bottom:30px !important;
  }

  .quote{
    padding:32px 24px !important;
  }

  .quote h2{
    font-size:clamp(26px,7.5vw,35px) !important;
  }

  .contact{
    margin-top:8px !important;
  }

  footer{
    margin-top:34px !important;
  }

  #cablePathBase{
    stroke-width:5.5 !important;
  }

  #cablePathCore{
    stroke-width:1.2 !important;
  }

  #cablePathLive{
    stroke-width:3.1 !important;
  }

  #cablePathGlow{
    stroke-width:8 !important;
  }

  #cableEnergy{
    stroke-width:1.8 !important;
    stroke-dasharray:10 46 !important;
  }

  .spark-halo{
    r:10;
  }
}


/* ===== v29 subtle purple cable dot ===== */
.cable-spark.cable-dot{
  opacity:.18 !important;
  filter:none !important;
  transition:opacity .16s ease !important;
}

body.cable-moving .cable-spark.cable-dot{
  opacity:.42 !important;
  filter:
    drop-shadow(0 0 3px rgba(192,0,255,.32)) !important;
}

body.cable-connected .cable-spark.cable-dot{
  opacity:0 !important;
}

.cable-dot-halo{
  fill:rgba(192,0,255,.10) !important;
  stroke:none !important;
}

.cable-dot-core{
  fill:#c000ff !important;
  stroke:none !important;
}

@media(max-width:700px){
  .cable-spark.cable-dot{
    opacity:.14 !important;
  }

  body.cable-moving .cable-spark.cable-dot{
    opacity:.34 !important;
  }

  .cable-dot-halo{
    r:6;
  }

  .cable-dot-core{
    r:2.4;
  }
}


/* Philosophy is body copy, not a hero heading */
.philosophy-copy{
  margin:22px 0 0 !important;
  max-width:920px;
  font-size:20px !important;
  line-height:1.7 !important;
  letter-spacing:-.01em;
  font-weight:400 !important;
  color:#cbc7d0 !important;
}

@media(max-width:700px){
  .philosophy-copy{
    font-size:17px !important;
    line-height:1.65 !important;
  }
}


/* =========================================================
   v31 — EDITORIAL BRAND SECTIONS + SUBTLE CONNECTION PROGRESS
========================================================= */

.editorial-section{
  padding-top:68px !important;
  padding-bottom:68px !important;
}

.editorial-card{
  position:relative;
  display:grid;
  grid-template-columns:260px 1fr;
  gap:56px;
  padding:42px 46px;
  border:1px solid rgba(255,255,255,.10);
  border-radius:28px;
  overflow:hidden;
  background:
    linear-gradient(135deg,rgba(192,0,255,.035),rgba(255,255,255,.008)),
    rgba(18,18,22,.68);
  box-shadow:
    0 18px 50px rgba(0,0,0,.12),
    inset 0 0 40px rgba(192,0,255,.018);
}

.editorial-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  bottom:0;
  width:2px;
  background:linear-gradient(
    180deg,
    rgba(224,102,255,.95),
    rgba(192,0,255,.48),
    transparent
  );
  box-shadow:0 0 18px rgba(192,0,255,.34);
}

.problem-card{
  background:
    radial-gradient(circle at 8% 0%,rgba(192,0,255,.09),transparent 34%),
    linear-gradient(135deg,rgba(192,0,255,.025),rgba(255,255,255,.006)),
    rgba(18,18,22,.66);
}

.philosophy-card{
  background:
    radial-gradient(circle at 92% 100%,rgba(192,0,255,.08),transparent 34%),
    linear-gradient(135deg,rgba(192,0,255,.025),rgba(255,255,255,.006)),
    rgba(18,18,22,.66);
}

.editorial-side{
  padding-top:3px;
}

.editorial-index{
  display:block;
  margin-bottom:24px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10px;
  letter-spacing:.16em;
  color:#68636f;
}

.editorial-kicker{
  max-width:210px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11px;
  line-height:1.55;
  letter-spacing:.14em;
  font-weight:800;
  color:#d8a0ef;
}

.editorial-main{
  max-width:820px;
}

.editorial-main h2{
  margin:0 0 22px !important;
  font-size:clamp(34px,4vw,54px) !important;
  line-height:1.05 !important;
  letter-spacing:-.04em;
}

.editorial-main p{
  margin:0;
  max-width:780px;
  font-size:18px;
  line-height:1.72;
  color:#bbb6c1;
}

.editorial-main p + p{
  margin-top:18px;
}

.editorial-emphasis{
  color:#e4dfe8 !important;
  font-weight:540;
}

.philosophy-main{
  max-width:880px;
}

.philosophy-lead{
  max-width:760px !important;
  font-size:clamp(24px,2.6vw,34px) !important;
  line-height:1.28 !important;
  letter-spacing:-.025em;
  color:#f0ebf2 !important;
}

.philosophy-body{
  max-width:820px !important;
  font-size:17px !important;
  line-height:1.72 !important;
}

.philosophy-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:28px;
}

.philosophy-tags span{
  padding:7px 10px;
  border-radius:999px;
  border:1px solid rgba(192,0,255,.18);
  background:rgba(192,0,255,.045);
  color:#aaa4b0;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10px;
  letter-spacing:.05em;
}

/* Cable story:
   dark cable = whole path
   purple section = how far visitor has "connected"
   tiny dot = current connection point */
.cable-spark.cable-progress-dot{
  opacity:.22 !important;
  filter:none !important;
  transition:opacity .15s ease,filter .15s ease !important;
}

body.cable-moving .cable-spark.cable-progress-dot{
  opacity:.55 !important;
  filter:
    drop-shadow(0 0 4px rgba(192,0,255,.38))
    drop-shadow(0 0 9px rgba(192,0,255,.18)) !important;
}

body.cable-connected .cable-spark.cable-progress-dot{
  opacity:0 !important;
}

.progress-dot-halo{
  fill:rgba(192,0,255,.09) !important;
  stroke:rgba(192,0,255,.16) !important;
  stroke-width:1 !important;
}

.progress-dot-core{
  fill:#c000ff !important;
  stroke:none !important;
}

#cablePathLive{
  opacity:.73 !important;
}

body.cable-moving #cablePathLive{
  opacity:.86 !important;
  filter:
    brightness(1.10)
    drop-shadow(0 0 5px rgba(192,0,255,.43))
    drop-shadow(0 0 12px rgba(192,0,255,.28)) !important;
}

@media(max-width:760px){
  .editorial-section{
    padding-top:48px !important;
    padding-bottom:48px !important;
  }

  .editorial-card{
    grid-template-columns:1fr;
    gap:22px;
    padding:30px 24px;
    border-radius:22px;
  }

  .editorial-index{
    margin-bottom:12px;
  }

  .editorial-kicker{
    max-width:none;
  }

  .editorial-main h2{
    font-size:34px !important;
    margin-bottom:18px !important;
  }

  .editorial-main p{
    font-size:16px;
    line-height:1.68;
  }

  .philosophy-lead{
    font-size:24px !important;
    line-height:1.30 !important;
  }

  .philosophy-body{
    font-size:16px !important;
  }

  .philosophy-tags{
    margin-top:22px;
  }

  .cable-spark.cable-progress-dot{
    opacity:.18 !important;
  }

  body.cable-moving .cable-spark.cable-progress-dot{
    opacity:.42 !important;
  }
}


/* =========================================================
   v32 — PASSWORD GATE
========================================================= */

body.site-locked{
  overflow:hidden !important;
}

body.site-locked > .site{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

.password-gate{
  position:fixed;
  inset:0;
  z-index:999999;
  display:grid;
  place-items:center;
  padding:24px;
  background:
    radial-gradient(circle at 76% 18%,rgba(192,0,255,.13),transparent 27%),
    radial-gradient(circle at 18% 78%,rgba(192,0,255,.06),transparent 31%),
    #0d0d0f;
}

.password-gate.hidden{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .32s ease,visibility .32s ease;
}

.password-gate-card{
  width:min(480px,100%);
  padding:38px;
  border:1px solid rgba(192,0,255,.26);
  border-radius:28px;
  background:
    linear-gradient(145deg,rgba(192,0,255,.045),rgba(255,255,255,.01)),
    rgba(20,20,25,.92);
  box-shadow:
    0 28px 80px rgba(0,0,0,.38),
    0 0 60px rgba(192,0,255,.08),
    inset 0 0 45px rgba(192,0,255,.018);
}

.password-gate-brand{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:54px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.15em;
}

.password-gate-mark{
  width:30px;
  height:30px;
  border-radius:50%;
  border:2px solid #c000ff;
  box-shadow:
    0 0 14px rgba(192,0,255,.55),
    inset 0 0 10px rgba(192,0,255,.18);
}

.password-gate-kicker{
  margin-bottom:13px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:10px;
  font-weight:800;
  letter-spacing:.17em;
  color:#be7bd8;
}

.password-gate-copy h1{
  margin:0 0 13px;
  font-size:clamp(40px,7vw,58px);
  line-height:1;
  letter-spacing:-.05em;
}

.password-gate-copy p{
  margin:0;
  color:#9e99a5;
  font-size:15px;
}

.password-form{
  display:grid;
  grid-template-columns:1fr auto;
  gap:9px;
  margin-top:34px;
}

.password-form input{
  width:100%;
  min-width:0;
  margin:0;
  padding:14px 15px;
  border-radius:11px;
  border:1px solid rgba(255,255,255,.12);
  background:#101013;
  color:#fff;
  outline:none;
}

.password-form input:focus{
  border-color:#c000ff;
  box-shadow:0 0 0 3px rgba(192,0,255,.09);
}

.password-form button{
  padding:14px 18px;
  border:1px solid #c000ff;
  border-radius:11px;
  background:#c000ff;
  color:#fff;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 0 20px rgba(192,0,255,.18);
}

.password-error{
  min-height:18px;
  margin-top:12px;
  color:#e8a1ff;
  font-size:12px;
}

@media(max-width:560px){
  .password-gate{
    padding:16px;
  }

  .password-gate-card{
    padding:28px 22px;
    border-radius:23px;
  }

  .password-gate-brand{
    margin-bottom:42px;
  }

  .password-form{
    grid-template-columns:1fr;
  }

  .password-form button{
    width:100%;
  }
}


/* v33 — editorial story integrated into services */
#services .services-editorial{margin:34px 0;}
#services .problem-card{margin-top:30px;margin-bottom:34px;}
#services .philosophy-card{margin-top:34px;margin-bottom:18px;}
@media(max-width:760px){#services .services-editorial{margin:26px 0;}#services .problem-card{margin-top:24px;margin-bottom:28px;}#services .philosophy-card{margin-top:28px;margin-bottom:14px;}}

/* v34 — DevOps, compact editorial story and real preview branding */
.password-gate-brand{display:block;margin-bottom:46px}
.password-gate-logo{display:block;width:min(220px,72%);height:auto;object-fit:contain}
#services .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}
.editorial-pair{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding-top:52px!important;padding-bottom:52px!important}
.editorial-pair .editorial-card{height:100%;margin:0!important;grid-template-columns:120px minmax(0,1fr);gap:26px;padding:34px}
.editorial-pair .editorial-main h2{font-size:clamp(30px,3vw,44px)!important}
.editorial-pair .philosophy-lead{font-size:clamp(22px,2.2vw,30px)!important}
.editorial-pair .philosophy-tags{gap:7px;margin-top:20px}
.editorial-pair .philosophy-tags span{padding:7px 9px}
@media(max-width:900px){
  .editorial-pair{grid-template-columns:1fr}
  .editorial-pair .editorial-card{grid-template-columns:140px minmax(0,1fr)}
}
@media(max-width:760px){
  #services .grid3{grid-template-columns:1fr}
  .password-gate-logo{width:min(190px,68%)}
  .editorial-pair{padding-top:36px!important;padding-bottom:36px!important;gap:14px}
  .editorial-pair .editorial-card{grid-template-columns:1fr;gap:16px;padding:26px 22px}
}

/* v35 — process as a connected journey */
#process .section-head{max-width:760px;margin-bottom:54px}
.process-flow{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.process-flow::before{content:"";position:absolute;left:28px;right:28px;top:27px;height:1px;background:linear-gradient(90deg,rgba(192,0,255,.18),#c000ff 45%,rgba(224,102,255,.3));box-shadow:0 0 14px rgba(192,0,255,.24)}
.process-step{position:relative;min-width:0}
.process-node{position:relative;z-index:2;width:56px;height:56px;display:grid;place-items:center;margin-bottom:24px;border:1px solid rgba(192,0,255,.42);border-radius:50%;background:#111114;box-shadow:0 0 0 7px #0d0d0f,0 0 24px rgba(192,0,255,.12)}
.process-node::after{content:"";position:absolute;inset:7px;border:1px solid rgba(224,102,255,.18);border-radius:50%}
.process-node span{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;font-weight:800;letter-spacing:.12em;color:#e6a0ff}
.process-copy{height:100%;min-height:245px;padding:27px 24px 25px;border:1px solid rgba(255,255,255,.09);border-radius:20px;background:linear-gradient(145deg,rgba(192,0,255,.035),rgba(255,255,255,.012));transition:transform .25s ease,border-color .25s ease,background .25s ease}
.process-step:hover .process-copy{transform:translateY(-5px);border-color:rgba(192,0,255,.28);background:linear-gradient(145deg,rgba(192,0,255,.07),rgba(255,255,255,.016))}
.process-copy small{display:block;margin-bottom:15px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;font-weight:800;letter-spacing:.18em;color:#9f68b3}
.process-copy h3{margin:0 0 14px;font-size:25px;letter-spacing:-.035em}
.process-copy p{margin:0;color:var(--muted);font-size:15px;line-height:1.68}
.process-step:last-child .process-node{border-color:#c000ff;box-shadow:0 0 0 7px #0d0d0f,0 0 28px rgba(192,0,255,.28)}
.process-step:last-child .process-node::before{content:"";position:absolute;width:7px;height:7px;border-radius:50%;background:#d65cff;box-shadow:0 0 12px #c000ff}
.process-step:last-child .process-node span{opacity:0}
@media(max-width:980px){
  .process-flow{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 16px}
  .process-flow::before{display:none}
  .process-node{margin-bottom:16px}
  .process-copy{min-height:210px}
}
@media(max-width:620px){
  #process .section-head{margin-bottom:38px}
  .process-flow{display:block;padding-left:48px}
  .process-flow::before{display:block;left:20px;right:auto;top:24px;bottom:24px;width:1px;height:auto;background:linear-gradient(180deg,rgba(192,0,255,.2),#c000ff 55%,rgba(224,102,255,.3))}
  .process-step{margin-bottom:16px}
  .process-step:last-child{margin-bottom:0}
  .process-node{position:absolute;left:-48px;top:0;width:40px;height:40px;margin:0;box-shadow:0 0 0 5px #0d0d0f,0 0 18px rgba(192,0,255,.14)}
  .process-node span{font-size:9px}
  .process-copy{min-height:0;padding:23px 21px;border-radius:18px}
  .process-copy h3{font-size:23px}
}

/* v35.1 — breathing room between hero headline lines */
.hero h1 span{display:inline-block;margin-top:.09em}

/* v36 — trust, functional contact, privacy controls */
:focus-visible{outline:2px solid #e066ff;outline-offset:4px}
.experience-strip{display:grid;grid-template-columns:minmax(270px,.7fr) 1.3fr;gap:42px;align-items:center;padding:28px 34px;border:1px solid rgba(192,0,255,.2);border-radius:22px;background:linear-gradient(110deg,rgba(192,0,255,.08),rgba(255,255,255,.018))}
.experience-number{display:flex;align-items:center;gap:20px}
.experience-number strong{font-size:clamp(50px,6vw,78px);line-height:.85;letter-spacing:-.07em;color:#e066ff;text-shadow:0 0 30px rgba(192,0,255,.2)}
.experience-number span{max-width:170px;font-size:14px;line-height:1.4;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.experience-strip>p{margin:0;padding-left:42px;border-left:1px solid rgba(255,255,255,.11);color:#c7c3cc;line-height:1.7}
.form-honeypot{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.form-consent{display:flex!important;flex-direction:row!important;align-items:flex-start!important;gap:11px!important;color:#aaa6b1!important;font-size:12px!important;line-height:1.55!important;text-transform:none!important;letter-spacing:0!important}
.form-consent input{flex:0 0 auto;width:17px!important;height:17px;margin:1px 0 0;accent-color:#c000ff}
.form-consent a,.contact-email,.cookie-banner a,.footer-links a:hover{color:#e89cff;text-decoration:underline;text-underline-offset:3px}
.form-actions{display:flex;align-items:center;justify-content:space-between;gap:18px}
.contact-email{font-size:14px;font-weight:700}
.form-status{min-height:22px;margin:0;color:#d9d4de;font-size:13px;line-height:1.55}
.form-status.is-success{color:#aaf0ce}.form-status.is-error{color:#f3a9bd}
.submit:disabled{opacity:.55;cursor:wait}
footer{align-items:flex-start!important;gap:28px}
footer>div{display:flex;flex-direction:column;gap:8px}
footer strong{color:#f5f2f7;font-size:12px;letter-spacing:.14em}
.footer-links{align-items:flex-end;flex-direction:row!important;flex-wrap:wrap;justify-content:flex-end;gap:10px 18px!important}
.footer-links a,.footer-links button{color:#aaa6b1;font-size:12px}
.footer-links button{padding:0;border:0;background:none;cursor:pointer}
.cookie-banner{position:fixed;z-index:120;left:24px;right:24px;bottom:24px;display:flex;align-items:center;justify-content:space-between;gap:28px;width:min(920px,calc(100% - 48px));margin:auto;padding:20px 22px;border:1px solid rgba(224,102,255,.3);border-radius:18px;background:rgba(20,20,24,.97);box-shadow:0 18px 70px rgba(0,0,0,.55),0 0 32px rgba(192,0,255,.1);backdrop-filter:blur(18px)}
.cookie-banner[hidden]{display:none}
.cookie-banner strong{display:block;margin-bottom:6px;font-size:15px}
.cookie-banner p{margin:0;max-width:620px;color:#aaa6b1;font-size:12px;line-height:1.55}
.cookie-actions{display:flex;gap:9px;flex:0 0 auto}
.cookie-actions button{padding:11px 14px;border-radius:10px;border:1px solid rgba(255,255,255,.13);color:#fff;background:#232329;font-size:12px;font-weight:800;cursor:pointer}
.cookie-actions .cookie-accept{border-color:#c000ff;background:#c000ff;box-shadow:0 0 18px rgba(192,0,255,.22)}
@media(max-width:760px){
  .experience-strip{grid-template-columns:1fr;gap:22px;padding:25px 23px}
  .experience-strip>p{padding:20px 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.11)}
  .form-actions{align-items:flex-start;flex-direction:column}
  footer{flex-direction:column}
  .footer-links{align-items:flex-start;justify-content:flex-start}
  .cookie-banner{left:14px;right:14px;bottom:14px;width:calc(100% - 28px);align-items:stretch;flex-direction:column;gap:16px}
  .cookie-actions{display:grid;grid-template-columns:1fr 1fr}
}
@media(max-width:420px){.cookie-actions{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}