:root {
      --bg:#050814;
      --dark:#050505;
      --panel:rgba(255,255,255,.065);
      --panel-soft:rgba(255,255,255,.035);
      --line:rgba(255,255,255,.14);
      --line-strong:rgba(255,255,255,.26);
      --text:#fff8ef;
      --muted:#b9b1aa;
      --cyan:#64efff;
      --violet:#7f5cff;
      --orange:#e7773a;
      --sun:#ffb86b;
      --active:#ffb86b;
      --pad:clamp(18px,4.5vw,64px);
      --max:1220px;
      --radius:28px;
      --shadow:0 32px 110px rgba(0,0,0,.55);
      --hero-p:0;
    }

    *{box-sizing:border-box}
    html{scroll-behavior:smooth;background:var(--bg)}
    body{
      margin:0;
      color:var(--text);
      background:
        radial-gradient(circle at 14% 2%,rgba(231,119,58,.18),transparent 30vw),
        radial-gradient(circle at 84% 12%,rgba(127,92,255,.18),transparent 32vw),
        linear-gradient(180deg,#050505 0%,#050814 42%,#04050b 100%);
      font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
      overflow-x:hidden;
    }
    body.menu-open{overflow:hidden}
    a{color:inherit;text-decoration:none}
    button,input{font:inherit;color:inherit}
    img{display:block;max-width:100%}::selection{background:var(--orange);color:#100601}.noise{pointer-events:none;position:fixed;inset:0;z-index:200;opacity:.055;mix-blend-mode:screen;background-image:radial-gradient(circle at 20% 20%,rgba(255,255,255,.8) 0 1px,transparent 1px),radial-gradient(circle at 80% 60%,rgba(255,255,255,.55) 0 1px,transparent 1px);background-size:37px 37px,63px 63px}.progress{position:fixed;inset:0 auto auto 0;z-index:260;width:0;height:3px;background:linear-gradient(90deg,var(--active),#fff);box-shadow:0 0 24px var(--active);transition:background.35s ease,box-shadow.35s ease}.cosmicLight{pointer-events:none;position:fixed;inset:-20vh -10vw;z-index:0;opacity:.52;background:radial-gradient(circle at calc(18% + var(--scrollShift,0)*1%) 22%,rgba(231,119,58,.16),transparent 28vw),radial-gradient(circle at calc(82% - var(--scrollShift,0)*.7%) 64%,rgba(127,92,255,.14),transparent 30vw),radial-gradient(circle at 50% calc(84% - var(--scrollShift,0)*.35%),rgba(100,239,255,.09),transparent 32vw);filter:blur(1px);animation:lightDrift 12s ease-in-out infinite alternate}.preloader{position:fixed;inset:0;z-index:300;background:#050505;display:grid;place-items:center;transition:opacity.7s ease,visibility.7s ease}.preloader.done{opacity:0;visibility:hidden}.preloaderCore{position:relative;width:min(72vw,420px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,rgba(255,248,239,.88) 0 2%,rgba(255,184,107,.58) 9%,rgba(231,119,58,.34) 24%,rgba(127,92,255,.16) 42%,transparent 66%);filter:drop-shadow(0 0 70px rgba(231,119,58,.36));animation:corePulse 1.4s ease-in-out both}.preloaderCore:before,.preloaderCore:after{content:"";position:absolute;inset:8%;border-radius:50%;border:1px solid rgba(255,255,255,.17);animation:spin 2s linear infinite}.preloaderCore:after{inset:22%;border-color:rgba(100,239,255,.22);animation-direction:reverse}.preloaderLogo{width:min(220px,48vw);height:auto;position:relative;z-index:2;filter:drop-shadow(0 0 28px rgba(231,119,58,.35))}.preloaderText{font-weight:950;letter-spacing:.18em;text-transform:uppercase;font-size:13px;color:#fff8ef;text-align:center}.header{position:fixed;inset:0 0 auto 0;height:76px;z-index:250;display:flex;align-items:center;justify-content:space-between;padding:16px var(--pad);background:linear-gradient(180deg,rgba(5,5,5,.76),rgba(5,5,5,0));backdrop-filter:blur(12px)}.brand{display:flex;align-items:center;gap:12px;font-weight:950;letter-spacing:.18em;text-transform:uppercase;font-size:13px}.brandLogo{width:142px;height:auto;filter:drop-shadow(0 0 18px rgba(231,119,58,.22))}.brandDot{width:13px;height:13px;border-radius:50%;background:radial-gradient(circle,#fff 0 18%,var(--sun) 20% 42%,var(--orange) 44% 100%);box-shadow:0 0 24px rgba(231,119,58,.8)}.burger{width:52px;height:52px;border-radius:50%;border:1px solid var(--line-strong);background:rgba(255,255,255,.055);display:grid;place-items:center;cursor:pointer;position:relative;transition:transform.2s ease,background.2s ease}.burger:hover{transform:scale(1.04);background:rgba(255,255,255,.1)}.burger span,.burger:before,.burger:after{content:"";position:absolute;width:22px;height:2px;border-radius:99px;background:currentColor;transition:transform.25s ease,opacity.2s ease}.burger:before{transform:translateY(-7px)}.burger:after{transform:translateY(7px)}.burger.is-open span{opacity:0}.burger.is-open:before{transform:rotate(45deg)}.burger.is-open:after{transform:rotate(-45deg)}.menu{position:fixed;inset:0;z-index:240;padding:110px var(--pad) var(--pad);display:grid;grid-template-columns:minmax(0,1fr) minmax(290px,.52fr);gap:clamp(28px,6vw,84px);align-items:end;background:radial-gradient(circle at 78% 14%,rgba(231,119,58,.24),transparent 28vw),radial-gradient(circle at 18% 88%,rgba(127,92,255,.20),transparent 28vw),rgba(5,5,5,.98);opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity.26s ease,visibility.26s ease,transform.26s ease}.menu.is-open{opacity:1;visibility:visible;transform:translateY(0)}.menuLinks{display:grid;gap:10px}.menuLinks a{font-weight:950;text-transform:uppercase;letter-spacing:-.07em;font-size:clamp(42px,7.8vw,104px);line-height:.88;color:rgba(255,248,239,.73);transition:color.2s ease,transform.2s ease}.menuLinks a:hover{color:white;transform:translateX(10px)}.menuCard{border:1px solid var(--line);border-radius:var(--radius);padding:clamp(24px,4vw,42px);background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.03));box-shadow:var(--shadow)}.menuCard small{display:block;color:var(--sun);font-weight:900;letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px}.menuCard p{margin:0;color:var(--muted);line-height:1.7;font-size:17px}.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 22px;border-radius:999px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.055);font-weight:900;letter-spacing:.04em;transition:transform.2s ease,background.2s ease,border-color.2s ease,box-shadow.2s ease}.btn:hover{transform:translateY(-2px);background:rgba(255,255,255,.11);border-color:rgba(255,255,255,.36)}.btn.primary{color:#130704;border:0;background:linear-gradient(135deg,var(--orange),var(--sun));box-shadow:0 18px 50px rgba(231,119,58,.32)}.btn.primary:hover{box-shadow:0 20px 58px rgba(231,119,58,.42)}.hero{position:relative;min-height:220vh}.heroStage{position:sticky;top:0;height:100vh;overflow:hidden;display:grid;place-items:center;isolation:isolate;background:#050505}
    #galaxy{position:absolute;inset:0;width:100%;height:100%;z-index:-9}.heroGradient{position:absolute;inset:0;z-index:-8;background:radial-gradient(circle at 50% 44%,rgba(255,184,107,.18),transparent 22%),radial-gradient(circle at 12% 30%,rgba(100,239,255,.15),transparent 30%),radial-gradient(circle at 88% 66%,rgba(127,92,255,.22),transparent 34%),linear-gradient(180deg,rgba(5,5,5,.05),rgba(5,5,5,.72));opacity:.95}.heroBackdrop{position:absolute;inset:15vh var(--pad) auto;z-index:-7;display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;opacity:calc(.18 + var(--hero-p)*.28);transform:translateY(calc(var(--hero-p)*-9vh)) scale(calc(1 + var(--hero-p)*.03));filter:saturate(1.15) contrast(1.08)}.heroImg{height:45vh;border-radius:30px;overflow:hidden;border:1px solid rgba(255,255,255,.1);box-shadow:0 36px 90px rgba(0,0,0,.5)}.heroImg:nth-child(1){transform:translateY(14vh)}.heroImg:nth-child(2){height:56vh}.heroImg:nth-child(3){transform:translateY(8vh)}.heroImg img{width:100%;height:100%;object-fit:cover;opacity:.72}.heroShade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,5,5,.2),rgba(5,5,5,.62) 58%,#050505 100%);z-index:-5}.heroCopy{width:min(1180px,92vw);text-align:center;padding:0 var(--pad);transform:translateY(calc(var(--hero-p)*-8vh));position:relative;z-index:5}.eyebrow{display:inline-flex;align-items:center;gap:10px;min-height:34px;padding:0 13px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(5,5,5,.28);backdrop-filter:blur(12px);font-size:12px;font-weight:950;letter-spacing:.16em;text-transform:uppercase;color:#ffd2ac}.eyebrow i{width:7px;height:7px;border-radius:50%;background:var(--sun);box-shadow:0 0 16px rgba(255,184,107,.88)}.hero h1{margin:18px 0 0;font-size:clamp(42px,7.4vw,104px);line-height:.9;letter-spacing:-.07em;text-transform:uppercase;font-weight:1000;text-wrap:balance;text-shadow:0 24px 80px rgba(0,0,0,.68)}.hero h1 span{display:block;background:linear-gradient(180deg,#fff 0%,#fff4e8 44%,#ffb86b 100%);-webkit-background-clip:text;background-clip:text;color:transparent}.heroLead{max-width:720px;margin:22px auto 0;color:rgba(255,248,239,.78);font-size:clamp(16px,1.75vw,20px);line-height:1.6;text-wrap:balance}.heroActions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:30px}.worldNav{display:none}.worldButton{position:relative;text-align:left;border:1px solid rgba(255,255,255,.13);border-radius:24px;padding:16px 17px;background:rgba(255,255,255,.055);backdrop-filter:blur(12px);overflow:hidden;cursor:pointer;transition:transform.22s ease,border-color.22s ease,background.22s ease}.worldButton:hover{transform:translateY(-4px);border-color:var(--c);background:rgba(255,255,255,.09)}.worldButton:before{content:"";position:absolute;inset:auto -20% -45% -20%;height:80%;background:radial-gradient(circle,var(--c),transparent 65%);opacity:.16}.worldButton b{display:block;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--c);margin-bottom:8px}.worldButton span{display:block;font-weight:950;font-size:18px;letter-spacing:-.03em}.scrollHint{position:absolute;left:var(--pad);bottom:24px;font-size:12px;font-weight:950;letter-spacing:.15em;text-transform:uppercase;color:rgba(255,248,239,.52);display:flex;gap:12px;align-items:center;z-index:6}.scrollHint:before{content:"";width:36px;height:1px;background:rgba(255,255,255,.36)}

    main{position:relative;z-index:2}.section{position:relative;padding:clamp(68px,8vw,116px) var(--pad);overflow:hidden}.wrap{max-width:var(--max);margin:0 auto}.sectionHead{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);gap:clamp(20px,4vw,54px);align-items:end;margin-bottom:clamp(26px,4vw,46px)}.kicker{display:inline-flex;align-items:center;gap:10px;color:var(--accent,var(--sun));font-size:12px;font-weight:950;letter-spacing:.17em;text-transform:uppercase}.kicker:before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent,var(--sun));box-shadow:0 0 16px var(--accent,var(--sun))}.section h2{margin:12px 0 0;font-size:clamp(32px,4.5vw,66px);line-height:.96;letter-spacing:-.055em;text-transform:uppercase;font-weight:1000;text-wrap:balance}.sectionHead p{margin:0;color:var(--muted);font-size:clamp(16px,1.75vw,20px);line-height:1.65;max-width:660px}.diagnosis{background:linear-gradient(180deg,#050505,#070915)}.diagnosisGrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.compare{border:1px solid var(--line);border-radius:30px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));padding:clamp(24px,4vw,38px);box-shadow:0 24px 80px rgba(0,0,0,.25)}.compare.bad{border-color:rgba(231,119,58,.22)}.compare.good{border-color:rgba(100,239,255,.25)}.compare h3{margin:0 0 20px;font-size:clamp(26px,3vw,38px);line-height:.95;letter-spacing:-.04em;text-transform:uppercase}.compare ul{list-style:none;padding:0;margin:0;display:grid;gap:13px;color:#ddd6cf}.compare li{display:flex;gap:12px;line-height:1.55}.compare li:before{content:"";width:9px;height:9px;border-radius:50%;background:var(--accent,var(--sun));box-shadow:0 0 14px var(--accent,var(--sun));margin-top:8px;flex:0 0 auto}.world{--accent:var(--cyan);background:radial-gradient(circle at 86% 20%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 34vw),linear-gradient(180deg,#050814,#050505)}.world.violet{--accent:var(--violet)}.world.orange{--accent:var(--sun)}.worldLayout{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1fr);gap:clamp(22px,4vw,54px);align-items:center}.worldText p{color:var(--muted);line-height:1.68;font-size:17px;margin:18px 0 0;max-width:650px}.featureList{display:grid;gap:12px;margin-top:24px}.feature{display:flex;gap:14px;align-items:flex-start;padding:14px;border:1px solid rgba(255,255,255,.1);border-radius:18px;background:rgba(255,255,255,.035)}.feature b{display:block;color:#fff;font-size:15px;margin-bottom:3px}.feature span{display:block;color:var(--muted);font-size:14px;line-height:1.55}.feature i{font-style:normal;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;color:#050505;background:var(--accent);font-weight:950;flex:0 0 auto;box-shadow:0 0 20px color-mix(in srgb,var(--accent) 55%,transparent)}.browserMock{position:relative;border:1px solid rgba(100,239,255,.22);border-radius:28px;background:rgba(3,8,17,.86);box-shadow:0 34px 110px rgba(0,0,0,.42),0 0 70px rgba(100,239,255,.1);overflow:hidden;transform-style:preserve-3d;transition:transform.18s ease}.browserTop{height:48px;border-bottom:1px solid rgba(255,255,255,.1);display:flex;align-items:center;gap:8px;padding:0 18px;background:rgba(255,255,255,.045)}.dot{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.22)}.browserUrl{margin-left:10px;height:22px;flex:1;border-radius:999px;background:rgba(255,255,255,.055);color:rgba(255,255,255,.48);font-size:11px;display:flex;align-items:center;padding:0 12px}.sitePreview{position:relative;padding:22px;min-height:470px;background:linear-gradient(135deg,rgba(100,239,255,.1),transparent 36%),repeating-linear-gradient(90deg,rgba(100,239,255,.04) 0 1px,transparent 1px 46px),repeating-linear-gradient(0deg,rgba(100,239,255,.03) 0 1px,transparent 1px 46px);overflow:hidden}.sitePreview:after{content:"";position:absolute;left:-30%;right:-30%;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--cyan),transparent);box-shadow:0 0 24px rgba(100,239,255,.8);animation:scanLine 3.2s ease-in-out infinite}.siteHero{height:166px;border-radius:22px;background:radial-gradient(circle at 70% 30%,rgba(100,239,255,.34),transparent 38%),linear-gradient(135deg,rgba(255,255,255,.15),rgba(255,255,255,.035));border:1px solid rgba(255,255,255,.12);padding:20px;display:grid;align-content:end;overflow:hidden;position:relative}.siteHero:before{content:"";position:absolute;inset:auto -20% -45% -20%;height:80%;background:radial-gradient(circle,rgba(100,239,255,.18),transparent 64%)}.line{height:10px;border-radius:99px;background:rgba(255,255,255,.18);margin-top:8px}.line.big{height:18px;width:72%;background:rgba(255,255,255,.32)}.previewGrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}.previewCard{height:96px;border-radius:18px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.045);padding:16px}.codePanel{margin-top:14px;border-radius:18px;border:1px solid rgba(100,239,255,.16);background:rgba(0,0,0,.22);padding:16px;display:grid;gap:8px}.codeLine{height:8px;border-radius:99px;background:linear-gradient(90deg,rgba(100,239,255,.62),rgba(255,255,255,.1));width:var(--w,70%);animation:codeFlow 2.8s ease-in-out infinite}.wireCube{position:absolute;right:28px;bottom:28px;width:86px;height:86px;border:1px solid rgba(100,239,255,.45);transform:rotateX(60deg) rotateZ(45deg);box-shadow:0 0 40px rgba(100,239,255,.18);animation:wire 5s linear infinite}.miniNav{position:absolute;left:20px;right:20px;top:18px;display:flex;gap:8px;z-index:2}.miniNav span{height:7px;border-radius:99px;background:rgba(255,255,255,.18);width:54px}.miniNav span:nth-child(1){background:rgba(100,239,255,.55);width:82px}.heroText{position:relative;z-index:2}.heroText.headline{height:18px;width:72%;border-radius:999px;background:rgba(255,255,255,.34);margin-bottom:10px}.heroText.copy{height:8px;width:58%;border-radius:999px;background:rgba(255,255,255,.18);margin-bottom:12px}.ctaMini{width:118px;height:28px;border-radius:999px;background:linear-gradient(135deg,var(--orange),var(--sun));box-shadow:0 0 26px rgba(231,119,58,.24)}.conversionWidget{position:absolute;right:22px;top:86px;width:138px;padding:14px;border:1px solid rgba(100,239,255,.22);border-radius:18px;background:rgba(3,8,17,.72);box-shadow:0 20px 50px rgba(0,0,0,.32);animation:floatWidget 4s ease-in-out infinite}.conversionWidget b{display:block;font-size:22px;color:#fff}.conversionWidget span{display:block;color:var(--muted);font-size:11px;margin-top:4px}.previewFooter{margin-top:14px;border-radius:18px;padding:14px;border:1px solid rgba(255,255,255,.09);background:rgba(255,255,255,.035);display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}.previewFooter i{height:46px;border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.035));position:relative;overflow:hidden}.previewFooter i:before{content:"";position:absolute;left:10px;right:20px;top:14px;height:8px;border-radius:99px;background:rgba(255,255,255,.22)}.storyboard{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.storyTile{position:relative;min-height:410px;border-radius:28px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:#111;cursor:pointer;box-shadow:0 26px 90px rgba(0,0,0,.4);transition:transform.25s ease,border-color.25s ease}.storyTile:hover{transform:translateY(-8px) scale(1.015);border-color:var(--violet)}.storyTile img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;filter:saturate(1.08) contrast(1.05);transition:transform.4s ease,filter.4s ease}.storyTile:hover img{transform:scale(1.08);filter:saturate(1.25) contrast(1.08)}.storyTile:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,.72))}.storyCaption{position:absolute;left:22px;right:22px;bottom:20px;z-index:2}.storyCaption small{color:#d8cfff;font-weight:950;letter-spacing:.12em;text-transform:uppercase}.storyCaption h3{margin:8px 0 0;font-size:28px;line-height:.95;letter-spacing:-.04em;text-transform:uppercase}.dashboard{position:relative;border:1px solid rgba(255,184,107,.22);border-radius:28px;background:radial-gradient(circle at 78% 16%,rgba(255,184,107,.18),transparent 28%),linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));padding:24px;box-shadow:0 34px 110px rgba(0,0,0,.42),0 0 70px rgba(231,119,58,.12);overflow:hidden}.dashboard:before{content:"";position:absolute;inset:-30%;background:conic-gradient(from 180deg,transparent,rgba(255,184,107,.12),transparent,rgba(231,119,58,.10),transparent);animation:spinSlow 12s linear infinite}
    #flare{position:absolute;inset:0;width:100%;height:100%;opacity:.55}.dashContent{position:relative;z-index:2}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}.metric{border:1px solid rgba(255,255,255,.1);border-radius:18px;padding:14px;background:rgba(0,0,0,.18)}.metric small{display:block;color:var(--muted);font-weight:800;margin-bottom:8px}.metric b{font-size:26px;color:#fff}.chart{height:250px;border:1px solid rgba(255,255,255,.1);border-radius:22px;background:repeating-linear-gradient(0deg,rgba(255,255,255,.04) 0 1px,transparent 1px 42px),rgba(0,0,0,.14);position:relative;overflow:hidden}.chart svg{position:absolute;inset:0;width:100%;height:100%}.chart path{fill:none;stroke:var(--sun);stroke-width:5;stroke-linecap:round;filter:drop-shadow(0 0 12px rgba(255,184,107,.7))}.rangeWrap{margin-top:18px;display:grid;gap:9px}.channelPills{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0 18px}.channelPills span{padding:8px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#ffe0c4}.liveFeed{display:grid;gap:8px;margin-top:14px}.liveFeed div{display:flex;justify-content:space-between;gap:12px;border-radius:14px;padding:10px 12px;background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.08);font-size:12px;color:var(--muted)}.liveFeed b{color:#fff}.rangeWrap label{color:#ffe0c4;font-size:13px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
    input[type=range]{width:100%;accent-color:var(--sun)}.portfolio{background:#050505;padding-top:0}.portfolioStage{position:relative;min-height:440vh}.portfolioSticky{position:sticky;top:0;height:100vh;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.72fr);overflow:hidden;background:#050505}.caseImageStack{position:relative;min-height:100vh}.caseImage{position:absolute;inset:0;opacity:0;transform:scale(1.05);transition:opacity.6s ease,transform.8s ease}.caseImage.active{opacity:1;transform:scale(1)}.caseImage img{width:100%;height:100%;object-fit:cover}.caseImage:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,5,5,.1),rgba(5,5,5,.52) 82%),linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.42))}.caseInfo{position:relative;z-index:2;padding:clamp(34px,5vw,68px);display:flex;flex-direction:column;justify-content:center;background:linear-gradient(90deg,rgba(5,5,5,.72),#050505)}.caseInfo small{color:var(--sun);font-weight:950;letter-spacing:.16em;text-transform:uppercase}.caseInfo h2{font-size:clamp(40px,5vw,76px);margin:14px 0 18px}.caseInfo p{color:var(--muted);line-height:1.7;font-size:18px;max-width:560px}.caseKpis{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}.kpi{border:1px solid rgba(255,255,255,.11);border-radius:18px;padding:16px;background:rgba(255,255,255,.04)}.kpi b{font-size:28px;color:#fff;display:block}.kpi span{color:var(--muted);font-size:13px}.caseDots{display:flex;gap:8px;margin-top:26px}.caseDots button{width:38px;height:5px;border:0;border-radius:99px;background:rgba(255,255,255,.18);cursor:pointer;padding:0}.caseDots button.active{background:var(--sun);box-shadow:0 0 16px rgba(255,184,107,.6)}.about{background:radial-gradient(circle at 12% 20%,rgba(255,184,107,.12),transparent 30vw),#07070c}.aboutGrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(24px,5vw,70px);align-items:center}.founders{display:grid;gap:14px}.founder{border:1px solid var(--line);border-radius:24px;padding:22px;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03))}.founder b{display:block;font-size:22px}.founder span{display:block;color:var(--sun);font-size:13px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;margin:7px 0 10px}.founder p{margin:0;color:var(--muted);line-height:1.6}.philosophy{border:1px solid var(--line);border-radius:32px;padding:clamp(26px,4vw,46px);background:linear-gradient(135deg,rgba(255,255,255,.08),rgba(255,255,255,.03));box-shadow:var(--shadow)}.splitWords{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:22px}.wordBox{border:1px solid rgba(255,255,255,.1);border-radius:22px;padding:20px;background:rgba(255,255,255,.035)}.wordBox b{font-size:30px;letter-spacing:-.05em}.wordBox p{margin:8px 0 0;color:var(--muted);line-height:1.55}.launch{padding-top:0;background:#050505}.launchPanel{position:relative;overflow:hidden;border:1px solid rgba(255,255,255,.16);border-radius:40px;min-height:460px;padding:clamp(34px,7vw,86px);display:grid;align-items:end;background:linear-gradient(135deg,rgba(100,239,255,.08),rgba(127,92,255,.08) 45%,rgba(255,184,107,.12));box-shadow:var(--shadow)}
    #vortex{position:absolute;inset:0;width:100%;height:100%;opacity:.62}.launchContent{position:relative;z-index:2;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end}.launch h2{max-width:760px}.launch p{color:var(--muted);font-size:20px;line-height:1.65;max-width:720px;margin:18px 0 0}.launch.btn{min-height:62px;padding:0 30px;font-size:15px;box-shadow:0 0 44px rgba(255,184,107,.28)}

    footer{padding:34px var(--pad) 54px;color:#8d867e;border-top:1px solid rgba(255,255,255,.08)}
    footer.wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px}.reveal{opacity:0;transform:translateY(28px);filter:blur(10px);transition:opacity.75s ease,transform.75s cubic-bezier(.2,.8,.1,1),filter.75s ease}.reveal.visible{opacity:1;transform:translateY(0);filter:blur(0)}

    @keyframes corePulse{0%{transform:scale(.25);opacity:.2}55%{transform:scale(.7);opacity:1}100%{transform:scale(1.25);opacity:0}}
    @keyframes spin{to{transform:rotate(360deg)}}
    @keyframes wire{to{transform:rotateX(60deg) rotateZ(405deg)}}
    @keyframes codeFlow{0%,100%{opacity:.45;transform:translateX(0)}50%{opacity:1;transform:translateX(8px)}}
    @keyframes scanLine{0%{transform:translateY(0);opacity:0}18%,75%{opacity:1}100%{transform:translateY(470px);opacity:0}}
    @keyframes floatWidget{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
    @keyframes spinSlow{to{transform:rotate(360deg)}}
    @keyframes lightDrift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(-2vw,2vh,0) scale(1.04)}}



    /* targeted client requested corrections */.webCopyOnly{align-self:center;max-width:460px}.webCopyOnly p{font-size:16px;color:rgba(255,248,239,.68);line-height:1.7;margin-top:16px}.webPageContent{position:relative;z-index:3;display:grid;gap:14px}.webPageHeroText{border:1px solid rgba(255,255,255,.12);border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.045));padding:20px;box-shadow:0 20px 55px rgba(0,0,0,.22)}.webPageHeroText h3{margin:0;font-size:clamp(24px,2.8vw,36px);line-height:.95;letter-spacing:-.04em;color:#fff;text-transform:uppercase;max-width:460px}.webPageHeroText p{margin:12px 0 0;color:rgba(255,248,239,.76);font-size:14px;line-height:1.55;max-width:560px}.webFeatureGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.webFeatureCard{position:relative;min-height:150px;border:1px solid rgba(100,239,255,.18);border-radius:18px;background:rgba(0,0,0,.23);padding:15px;overflow:hidden;box-shadow:inset 0 0 30px rgba(100,239,255,.025)}.webFeatureCard:before{content:attr(data-num);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--cyan);color:#031018;font-weight:950;margin-bottom:12px;box-shadow:0 0 22px rgba(100,239,255,.48)}.webFeatureCard b{display:block;color:#fff;font-size:14px;line-height:1.15;margin-bottom:8px}.webFeatureCard span{display:block;color:rgba(255,248,239,.62);font-size:12px;line-height:1.45}.webConversionStrip{display:flex;align-items:center;justify-content:space-between;gap:12px;border-radius:18px;border:1px solid rgba(231,119,58,.22);background:linear-gradient(135deg,rgba(231,119,58,.16),rgba(255,184,107,.07));padding:14px 16px;color:#fff;box-shadow:0 0 38px rgba(231,119,58,.11)}.webConversionStrip b{font-size:15px}.webConversionStrip span{color:rgba(255,248,239,.66);font-size:12px}.webConversionStrip i{font-style:normal;display:inline-grid;place-items:center;min-width:92px;height:32px;border-radius:999px;background:linear-gradient(135deg,var(--orange),var(--sun));color:#160804;font-weight:950;font-size:12px}.wideHead{grid-template-columns:1fr;max-width:1040px;align-items:start}.wideHead p{max-width:980px;font-size:clamp(17px,1.9vw,23px);color:rgba(255,248,239,.76)}.caseInfo{overflow:hidden}.caseInfo:before{content:"";position:absolute;inset:8% auto auto -28%;width:44%;height:70%;background:radial-gradient(circle,rgba(255,184,107,.22),transparent 68%);filter:blur(18px);opacity:.8;pointer-events:none}.caseInfo h2,.caseInfo p,.caseKpis,.caseDots,.caseInfo small{position:relative;z-index:2}.caseImage.active img{animation:caseKenburns 7s ease-in-out both}.caseKpis.kpi{transition:transform.25s ease, border-color.25s ease}.caseKpis.kpi:hover{transform:translateY(-4px);border-color:rgba(255,184,107,.38)}.caseDots{display:grid;grid-template-columns:1fr;gap:10px;margin-top:28px}.caseDots button{width:100%;height:auto;min-height:58px;border:1px solid rgba(255,255,255,.12);border-radius:18px;background:rgba(255,255,255,.045);color:#fff8ef;text-align:left;padding:12px 14px;display:grid;gap:4px;cursor:pointer;transition:transform.22s ease,border-color.22s ease,background.22s ease,box-shadow.22s ease}.caseDots button strong{font-size:13px;letter-spacing:.08em;text-transform:uppercase}.caseDots button span{font-size:12px;color:rgba(255,248,239,.58)}.caseDots button.active{background:linear-gradient(135deg,rgba(231,119,58,.22),rgba(255,184,107,.08));border-color:rgba(255,184,107,.55);box-shadow:0 0 34px rgba(231,119,58,.16);transform:translateX(-6px)}.founder{display:grid;grid-template-columns:86px 1fr;gap:16px;align-items:center;padding:16px}.founder img{width:86px;height:86px;object-fit:contain;filter:drop-shadow(0 12px 28px rgba(231,119,58,.22));align-self:start}.founderCopy b{display:block;font-size:21px}.founderCopy p{font-size:14px}.founderCopy span{display:block;color:var(--sun);font-size:12px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;margin:6px 0 8px}
    @keyframes caseKenburns{0%{transform:scale(1.02)}100%{transform:scale(1.09)}}

    @media(max-width:980px){.menu,.sectionHead,.diagnosisGrid,.worldLayout,.aboutGrid,.launchContent{grid-template-columns:1fr}.worldNav{grid-template-columns:1fr;max-width:520px}.storyboard{grid-template-columns:1fr}.founder{grid-template-columns:70px 1fr}.founder img{width:70px;height:70px}.caseDots button.active{transform:none}.portfolioSticky{position:relative;height:auto;grid-template-columns:1fr}.portfolioStage{min-height:auto}.caseImageStack{height:64vh;min-height:420px}.caseInfo{padding:34px var(--pad) 80px}.portfolio{padding-top:80px}.metrics{grid-template-columns:1fr}.heroBackdrop{grid-template-columns:1fr 1fr;opacity:.18}.heroImg:nth-child(3){display:none}
    }
    @media(max-width:620px){.header{height:70px}.brand{font-size:12px;letter-spacing:.13em}.brandLogo{width:118px}.hero{min-height:210vh}.heroBackdrop{display:none}.hero h1{font-size:clamp(40px,14vw,72px)}.heroLead{font-size:16px}.section{padding:60px var(--pad)}.sitePreview{min-height:410px;padding:16px}.storyTile{min-height:330px}.caseKpis,.previewGrid,.splitWords,.webFeatureGrid{grid-template-columns:1fr}.launchPanel{border-radius:28px}
    }
    @media(prefers-reduced-motion:reduce){
      *{scroll-behavior:auto!important;animation:none!important;transition:none!important}.preloader{display:none}.reveal{opacity:1;transform:none;filter:none}
    }
  

    /* v17 targeted corrections */.diagnosisHead,.wideHead{
      grid-template-columns:1fr!important;
      max-width:min(1500px,100%);
      margin-left:0;
      margin-right:auto;
    }.diagnosisHead h2,.wideHead h2{
      max-width:min(1440px,96vw);
      text-wrap:balance;
      font-size:clamp(44px,6.7vw,104px);
      line-height:.9;
    }.diagnosisHead p,.wideHead p{
      max-width:min(1120px,92vw);
      margin-top:18px;
    }.world.violet.wideHead h2{max-width:min(1500px,96vw)}.netflixPortfolio{
      min-height:100vh;
      padding:0;
      background:#050505;
      overflow:hidden;
    }.netflixPortfolio.portfolioStage{
      min-height:100vh;
      height:auto;
      position:relative;
    }.portfolioIntro{
      position:absolute;
      left:var(--pad);
      top:clamp(88px,10vh,120px);
      z-index:5;
      max-width:760px;
      pointer-events:none;
    }.portfolioIntro h2{
      margin:12px 0 0;
      font-size:clamp(34px,4.6vw,76px);
      line-height:.9;
      letter-spacing:-.055em;
      text-transform:uppercase;
      text-wrap:balance;
    }.netflixDashboard{
      position:relative!important;
      top:auto!important;
      height:100vh;
      min-height:760px;
      display:block;
      overflow:hidden;
      background:#050505;
    }.netflixHero{
      position:absolute;
      inset:0;
      min-height:0;
      height:100%;
    }.netflixHero.caseImage:after{
      background:
        linear-gradient(90deg,rgba(5,5,5,.85) 0%,rgba(5,5,5,.42) 34%,rgba(5,5,5,.12) 62%,rgba(5,5,5,.62) 100%),
        linear-gradient(180deg,rgba(5,5,5,.18),rgba(5,5,5,.52) 78%,#050505 100%);
    }.netflixHero.caseImage img{
      object-position:center;
      transform:scale(1.01);
    }.netflixInfo{
      position:absolute;
      left:var(--pad);
      bottom:clamp(160px,22vh,230px);
      width:min(680px,52vw);
      padding:0;
      background:transparent!important;
      display:block;
    }.netflixInfo:before{display:none}.netflixInfo small{color:var(--sun)}.netflixInfo h2{
      font-size:clamp(38px,5.2vw,86px);
      line-height:.88;
      max-width:780px;
      text-shadow:0 20px 80px rgba(0,0,0,.72);
    }.netflixInfo p{
      max-width:650px;
      font-size:clamp(16px,1.35vw,19px);
      color:rgba(255,248,239,.78);
    }.netflixInfo.caseKpis{max-width:440px}.netflixRail{
      position:absolute;
      left:var(--pad);
      right:var(--pad);
      bottom:34px;
      z-index:8;
      display:grid!important;
      grid-template-columns:repeat(4,minmax(190px,1fr));
      gap:14px;
      margin:0;
    }.netflixRail.netflixCard{
      position:relative;
      min-height:160px;
      width:auto;
      border:1px solid rgba(255,255,255,.13);
      border-radius:18px;
      overflow:hidden;
      background:#111;
      padding:0;
      cursor:pointer;
      box-shadow:0 18px 60px rgba(0,0,0,.36);
      transform:none;
      transition:transform.28s ease,border-color.28s ease,box-shadow.28s ease,filter.28s ease;
    }.netflixRail.netflixCard img{
      position:absolute;
      inset:0;
      width:100%;
      height:100%;
      object-fit:cover;
      filter:saturate(.86) brightness(.68);
      transition:transform.35s ease,filter.35s ease;
    }.netflixRail.netflixCard:after{
      content:"";
      position:absolute;
      inset:0;
      background:linear-gradient(180deg,rgba(0,0,0,.05),rgba(0,0,0,.72));
    }.netflixRail.netflixCard span{
      position:absolute;
      left:14px;
      right:14px;
      bottom:12px;
      z-index:2;
      color:#fff8ef;
      font-weight:950;
      font-size:13px;
      letter-spacing:.08em;
      text-transform:uppercase;
      text-shadow:0 10px 30px rgba(0,0,0,.8);
    }.netflixRail.netflixCard:hover,.netflixRail.netflixCard.active{
      transform:translateY(-12px) scale(1.04);
      border-color:rgba(255,184,107,.7);
      box-shadow:0 28px 80px rgba(0,0,0,.5),0 0 34px rgba(255,184,107,.18);
      z-index:3;
    }.netflixRail.netflixCard:hover img,.netflixRail.netflixCard.active img{
      transform:scale(1.08);
      filter:saturate(1.12) brightness(.92);
    }.aboutGrid{display:block}.cRoles{
      display:grid!important;
      grid-template-columns:repeat(3,1fr);
      gap:18px;
      margin-top:34px;
    }.roleCard{
      min-height:430px;
      display:flex!important;
      flex-direction:column;
      justify-content:flex-end;
      padding:0!important;
      overflow:hidden;
      position:relative;
      border-radius:30px!important;
      background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03))!important;
      transition:transform.28s ease,border-color.28s ease,box-shadow.28s ease;
    }.roleCard:hover{
      transform:translateY(-8px);
      border-color:rgba(255,184,107,.38);
      box-shadow:0 28px 90px rgba(0,0,0,.34),0 0 34px rgba(255,184,107,.11);
    }.roleCard img{
      position:absolute;
      left:50%;
      top:20px;
      transform:translateX(-50%);
      width:82%;
      height:260px;
      object-fit:contain;
      filter:drop-shadow(0 22px 44px rgba(0,0,0,.38));
    }.roleCard:before{
      content:"";
      position:absolute;
      inset:auto -25% 34% -25%;
      height:40%;
      background:radial-gradient(circle,rgba(255,184,107,.18),transparent 66%);
      filter:blur(10px);
    }.roleCard.founderCopy{
      position:relative;
      z-index:2;
      padding:260px 22px 24px;
      background:linear-gradient(180deg,transparent,rgba(5,5,5,.72) 34%,rgba(5,5,5,.94));
    }.roleCard.founderCopy b{font-size:clamp(23px,2.4vw,34px);line-height:1;letter-spacing:-.04em}.roleCard.founderCopy p{font-size:15px;line-height:1.55;color:rgba(255,248,239,.68)}.compactPhilosophy{
      margin-top:18px;
      display:grid;
      grid-template-columns:minmax(0,.75fr) minmax(0,1fr);
      gap:24px;
      align-items:end;
    }.compactPhilosophy h2{margin:12px 0 0;font-size:clamp(34px,4vw,62px)}.compactPhilosophy p{margin:0!important}

    @media(max-width:980px){.netflixDashboard{height:auto;min-height:0;padding-top:440px;padding-bottom:28px}.portfolioIntro{position:relative;top:auto;left:auto;padding:90px var(--pad) 0}.netflixHero{height:440px;inset:0 0 auto 0}.netflixInfo{position:relative;left:auto;bottom:auto;width:auto;padding:0 var(--pad);margin-top:24px}.netflixRail{position:relative;left:auto;right:auto;bottom:auto;padding:0 var(--pad);grid-template-columns:repeat(2,1fr);margin-top:24px}.netflixRail.netflixCard{min-height:150px}.cRoles{grid-template-columns:1fr}.roleCard{min-height:380px}.compactPhilosophy{grid-template-columns:1fr}
    }
    @media(max-width:620px){.diagnosisHead h2,.wideHead h2{font-size:clamp(38px,12vw,68px)}.netflixRail{grid-template-columns:1fr}.netflixInfo h2{font-size:clamp(34px,11vw,58px)}
    }

  

/* ===== V18 targeted fixes ===== */.sectionHead.wideHead{grid-template-columns:minmax(0,1.35fr) minmax(320px,.9fr);max-width:none;width:100%;align-items:end}.sectionHead.wideHead h2{max-width:1280px;font-size:clamp(42px,6.1vw,104px)}.sectionHead.wideHead p{max-width:720px}.preloader{gap:18px}.supernovaCore{position:relative;width:min(76vw,460px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;overflow:visible;background:radial-gradient(circle at center,rgba(255,255,255,.98) 0 1.5%,rgba(255,184,107,.92) 5%,rgba(231,119,58,.6) 12%,rgba(127,92,255,.34) 24%,rgba(100,239,255,.18) 38%,transparent 58%);filter:drop-shadow(0 0 80px rgba(255,184,107,.3));animation:supernovaBloom 1.45s ease-out both}.supernovaCore:before{content:"";position:absolute;inset:20%;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.85),rgba(255,184,107,.2) 48%,transparent 70%);filter:blur(10px);animation:supernovaFlash 1.25s ease-out both}.novaRing,.novaRay,.novaDust{position:absolute;pointer-events:none}.novaRing{inset:16%;border-radius:50%;border:1px solid rgba(255,255,255,.18);animation:novaRing 1.4s ease-out infinite}.novaRing.ringB{inset:30%;border-color:rgba(100,239,255,.24);animation-delay:.18s}.novaRay{left:50%;top:50%;width:2px;height:42%;transform-origin:50% 100%;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,184,107,.55),transparent 92%);filter:drop-shadow(0 0 10px rgba(255,184,107,.45));animation:novaRay 1.25s ease-out infinite}.novaRay.r1{transform:translate(-50%,-100%) rotate(0deg)}.novaRay.r2{transform:translate(-50%,-100%) rotate(60deg)}.novaRay.r3{transform:translate(-50%,-100%) rotate(120deg)}.novaRay.r4{transform:translate(-50%,-100%) rotate(180deg)}.novaRay.r5{transform:translate(-50%,-100%) rotate(240deg)}.novaRay.r6{transform:translate(-50%,-100%) rotate(300deg)}.novaDust{width:10px;height:10px;border-radius:50%;background:radial-gradient(circle,#fff8ef 0 25%,rgba(255,184,107,.5) 42%,transparent 74%);box-shadow:0 0 18px rgba(255,184,107,.55);animation:novaDust 1.45s ease-out infinite}.novaDust.d1{left:17%;top:26%}.novaDust.d2{right:20%;top:34%;animation-delay:.18s}.novaDust.d3{left:46%;bottom:14%;animation-delay:.32s}.preloaderText{opacity:.8}.roleShowcase{position:relative;overflow:hidden;margin-top:10px;border:1px solid rgba(255,255,255,.11);border-radius:36px;padding:clamp(22px,3.2vw,34px);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.025));box-shadow:var(--shadow)}.roleShowcase:before{content:"";position:absolute;inset:-10% -14% auto auto;width:420px;height:420px;background:radial-gradient(circle,rgba(127,92,255,.18),transparent 62%);filter:blur(30px)}.roleShowcase:after{content:"";position:absolute;inset:auto auto -30% -10%;width:360px;height:360px;background:radial-gradient(circle,rgba(255,184,107,.12),transparent 62%);filter:blur(35px)}.roleShowcaseTop{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(280px,.7fr);gap:22px;align-items:end;margin-bottom:24px}.roleShowcaseTop h3{margin:12px 0 0;font-size:clamp(28px,3.8vw,54px);line-height:.94;text-transform:uppercase;letter-spacing:-.045em}.roleShowcaseTop p{margin:0;color:rgba(255,248,239,.74);line-height:1.7;font-size:17px;max-width:520px}.roleScroller{position:relative;z-index:2;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(320px,36vw);gap:20px;overflow-x:auto;padding:6px 4px 14px;scroll-snap-type:x mandatory;scrollbar-width:none}.roleScroller::-webkit-scrollbar{display:none}.roleSlide{scroll-snap-align:center;position:relative;min-height:520px;border-radius:30px;border:1px solid rgba(255,255,255,.1);overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));box-shadow:0 22px 80px rgba(0,0,0,.32);transition:transform.35s ease,border-color.35s ease,box-shadow.35s ease,filter.35s ease;filter:saturate(.88)}.roleSlide.active{transform:translateY(-8px) scale(1.01);border-color:rgba(255,184,107,.45);box-shadow:0 28px 100px rgba(0,0,0,.46),0 0 34px rgba(127,92,255,.16);filter:saturate(1.06)}.roleNebula{position:absolute;inset:0;background:radial-gradient(circle at 50% 20%,rgba(127,92,255,.28),transparent 34%),radial-gradient(circle at 50% 58%,rgba(255,184,107,.16),transparent 40%),linear-gradient(180deg,rgba(6,6,11,.08),rgba(5,5,5,.68) 72%,rgba(5,5,5,.95));pointer-events:none}.roleMedia{position:absolute;inset:18px 18px auto 18px;height:285px;border-radius:24px;background:radial-gradient(circle at 50% 50%,rgba(100,239,255,.08),transparent 58%)}.roleMedia img{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 26px 38px rgba(0,0,0,.38))}.roleCaption{position:absolute;left:0;right:0;bottom:0;padding:24px 24px 26px;background:linear-gradient(180deg,transparent,rgba(5,5,5,.76) 24%,rgba(5,5,5,.96) 100%)}.roleCaption span{display:inline-block;color:var(--sun);font-size:12px;font-weight:900;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px}.roleCaption h3{margin:0;font-size:clamp(26px,2.8vw,38px);line-height:.95;letter-spacing:-.04em}.roleCaption p{margin:12px 0 0;color:rgba(255,248,239,.7);line-height:1.65;font-size:15px}.roleDots{display:flex;justify-content:center;gap:8px;margin-top:16px;position:relative;z-index:2}.roleDots button{width:34px;height:4px;border:0;border-radius:99px;background:rgba(255,255,255,.16);cursor:pointer;transition:background.25s ease,box-shadow.25s ease}.roleDots button.active{background:var(--sun);box-shadow:0 0 16px rgba(255,184,107,.55)}.cleanPortfolioStage{min-height:100vh!important}.cleanCases{position:relative!important;top:auto!important;height:100vh!important;min-height:760px;background:#050505;display:block!important;overflow:hidden;border-top:1px solid rgba(255,255,255,.08)}.caseSpaceOverlay{position:absolute;inset:0;background:
  radial-gradient(circle at 14% 18%,rgba(127,92,255,.20),transparent 22%),
  radial-gradient(circle at 82% 18%,rgba(255,184,107,.13),transparent 24%),
  radial-gradient(circle at 60% 74%,rgba(100,239,255,.12),transparent 22%);
  pointer-events:none}.caseSpaceOverlay:before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.22) 0 1px,transparent 1px);background-size:42px 42px;opacity:.28}.cleanIntro{position:absolute;left:var(--pad);top:calc(86px + clamp(16px,3vw,30px));z-index:8;max-width:780px}.cleanIntro h2{font-size:clamp(34px,4vw,62px);line-height:.94;max-width:720px}.cleanInfo{position:absolute;left:var(--pad);bottom:200px;z-index:9;width:min(620px,52vw);padding:0!important;background:transparent!important}.cleanInfo:before{display:none!important}.cleanInfo small{display:inline-block;padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.08);backdrop-filter:blur(10px);color:var(--sun)}.cleanInfo h2{margin:18px 0 14px;font-size:clamp(42px,5.2vw,78px);line-height:.9;max-width:780px;text-shadow:0 14px 50px rgba(0,0,0,.72)}.cleanInfo p{max-width:600px;font-size:18px;color:rgba(255,248,239,.8);line-height:1.65}.cleanKpis{grid-template-columns:repeat(2,minmax(0,220px));gap:14px;max-width:500px}.cleanKpis.kpi{background:rgba(255,255,255,.06);backdrop-filter:blur(10px);border-color:rgba(255,255,255,.12)}.cleanKpis.kpi b{font-size:20px}.cleanKpis.kpi span{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:#d0c7bf}.cleanRail{position:absolute;left:var(--pad);right:var(--pad);bottom:28px;z-index:10;display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}.cleanRail.netflixCard{position:relative;min-height:170px;border:1px solid rgba(255,255,255,.12);border-radius:22px;overflow:hidden;background:#111;padding:0;cursor:pointer;box-shadow:0 18px 52px rgba(0,0,0,.38);transition:transform.3s ease,border-color.3s ease,box-shadow.3s ease}.cleanRail.netflixCard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.9) brightness(.68);transition:transform.4s ease,filter.4s ease}.cleanRail.netflixCard:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.72))}.cleanRail.netflixMeta{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;display:grid;gap:4px;text-align:left}.cleanRail.netflixMeta strong{font-size:16px;line-height:1.05}.cleanRail.netflixMeta span{font-size:12px;color:rgba(255,248,239,.65)}.cleanRail.netflixCard:hover,.cleanRail.netflixCard.active{transform:translateY(-8px);border-color:rgba(255,184,107,.5);box-shadow:0 24px 72px rgba(0,0,0,.48),0 0 24px rgba(127,92,255,.14)}.cleanRail.netflixCard:hover img,.cleanRail.netflixCard.active img{transform:scale(1.06);filter:saturate(1.06) brightness(.84)}

@keyframes supernovaBloom{0%{transform:scale(.12);opacity:.18}35%{transform:scale(.4);opacity:1}75%{transform:scale(1.02);opacity:1}100%{transform:scale(1.08);opacity:.95}}
@keyframes supernovaFlash{0%{transform:scale(.4);opacity:.2}55%{transform:scale(1.4);opacity:1}100%{transform:scale(1.9);opacity:0}}
@keyframes novaRing{0%{transform:scale(.4);opacity:.75}100%{transform:scale(1.26);opacity:0}}
@keyframes novaRay{0%{opacity:0;transform:translate(-50%,-100%) scaleY(.18) rotate(var(--r,0deg))}20%{opacity:.85}100%{opacity:0;transform:translate(-50%,-100%) scaleY(1.1) rotate(var(--r,0deg))}}
@keyframes novaDust{0%{transform:translate(0,0) scale(.4);opacity:0}20%{opacity:1}100%{transform:translate(var(--tx,0),var(--ty,0)) scale(1.45);opacity:0}}.novaDust.d1{--tx:-46px;--ty:-24px}.novaDust.d2{--tx:42px;--ty:-10px}.novaDust.d3{--tx:8px;--ty:36px}

@media(max-width:1100px){.sectionHead.wideHead{grid-template-columns:1fr}.roleShowcaseTop{grid-template-columns:1fr}.cleanInfo{width:min(640px,72vw);bottom:210px}.cleanRail{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:980px){.sectionHead.wideHead h2{font-size:clamp(34px,10vw,74px)}.roleScroller{grid-auto-columns:88vw}.roleSlide{min-height:470px}.roleMedia{height:240px}.cleanCases{min-height:920px;height:auto!important;padding-bottom:24px}.cleanIntro,.cleanInfo,.cleanRail{position:relative;left:auto;right:auto;bottom:auto;top:auto}.cleanIntro{padding:90px var(--pad) 0}.netflixHero{position:relative;height:48vh;min-height:360px}.cleanInfo{width:auto;padding:22px var(--pad) 0!important}.cleanRail{padding:18px var(--pad) 0}
}
@media(max-width:620px){.cleanRail{grid-template-columns:1fr 1fr;gap:10px}.cleanRail.netflixCard{min-height:130px}.cleanInfo h2{font-size:clamp(34px,10vw,54px)}.roleShowcase{padding:18px}
}


/* ===== V20 Founder scroll only ===== */.about.compactPhilosophy{display:none!important}.founderSequence{position:relative;min-height:330vh;margin-top:clamp(16px,3vw,28px)}.founderSticky{position:sticky;top:92px;min-height:calc(100vh - 112px);display:grid;grid-template-columns:minmax(0,1fr) minmax(380px,.82fr);gap:clamp(24px,5vw,72px);align-items:center;border:1px solid rgba(255,255,255,.11);border-radius:40px;padding:clamp(20px,3.6vw,42px);background:linear-gradient(135deg,rgba(255,255,255,.065),rgba(255,255,255,.025));overflow:hidden;box-shadow:0 32px 110px rgba(0,0,0,.42)}.founderSticky:before{content:"";position:absolute;inset:-24% auto auto -12%;width:58vw;height:58vw;max-width:760px;max-height:760px;background:radial-gradient(circle,rgba(255,184,107,.16),rgba(127,92,255,.12) 42%,transparent 68%);filter:blur(26px);opacity:.9;pointer-events:none}.founderSticky:after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.18) 0 1px,transparent 1px);background-size:44px 44px;opacity:.18;pointer-events:none}.founderStage{position:relative;z-index:2;min-height:min(70vh,620px);border-radius:32px;overflow:hidden;background:radial-gradient(circle at 50% 18%,rgba(127,92,255,.18),transparent 34%),linear-gradient(180deg,rgba(255,255,255,.04),rgba(0,0,0,.18));border:1px solid rgba(255,255,255,.1);display:grid;place-items:center;perspective:900px}.founderOrbit{position:absolute;inset:10%;border-radius:50%;border:1px solid rgba(255,184,107,.22);box-shadow:0 0 40px rgba(255,184,107,.08),inset 0 0 50px rgba(127,92,255,.06);animation:founderOrbit 9s linear infinite}.founderOrbit:before,.founderOrbit:after{content:"";position:absolute;inset:12%;border-radius:50%;border:1px solid rgba(100,239,255,.10)}.founderOrbit:after{inset:28%;border-color:rgba(127,92,255,.14)}.founderVisual{position:absolute;inset:0;margin:0;display:grid;place-items:end center;opacity:0;transform:translateX(60px) scale(.96) rotateY(-10deg);filter:blur(10px) saturate(.8);transition:opacity.55s ease,transform.75s cubic-bezier(.2,.85,.1,1),filter.65s ease}.founderVisual.active{opacity:1;transform:translateX(0) scale(1) rotateY(0deg);filter:blur(0) saturate(1.05)}.founderVisual img{width:min(82%,460px);height:min(82%,560px);object-fit:contain;object-position:bottom center;filter:drop-shadow(0 34px 42px rgba(0,0,0,.42)) drop-shadow(0 0 34px rgba(255,184,107,.12))}.founderVisual:before{content:"";position:absolute;left:50%;bottom:7%;width:62%;height:22%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,184,107,.26),transparent 72%);filter:blur(16px)}.founderVisual figcaption{position:absolute;left:22px;top:22px;font-size:12px;font-weight:950;letter-spacing:.16em;color:rgba(255,248,239,.55);border:1px solid rgba(255,255,255,.12);border-radius:999px;padding:8px 10px;background:rgba(0,0,0,.18);backdrop-filter:blur(10px)}.founderCopyPanel{position:relative;z-index:2;align-self:center;min-height:430px;display:flex;flex-direction:column;justify-content:center}.founderCopyPanel>h2{margin:16px 0 26px;font-size:clamp(34px,4.8vw,74px);line-height:.9;letter-spacing:-.06em;text-transform:uppercase;max-width:760px}.founderInfoStack{position:relative;min-height:220px}.founderInfo{position:absolute;inset:0;opacity:0;transform:translateY(26px);filter:blur(8px);transition:opacity.5s ease,transform.55s cubic-bezier(.2,.8,.1,1),filter.55s ease;pointer-events:none}.founderInfo.active{opacity:1;transform:translateY(0);filter:blur(0);pointer-events:auto}.founderInfo span{display:block;color:var(--sun);font-size:13px;font-weight:950;letter-spacing:.14em;text-transform:uppercase;margin-bottom:10px}.founderInfo h3{margin:0;font-size:clamp(32px,4vw,58px);line-height:.92;letter-spacing:-.045em}.founderInfo p{margin:16px 0 0;color:rgba(255,248,239,.74);font-size:clamp(16px,1.45vw,20px);line-height:1.7;max-width:650px}.founderProgress{display:flex;gap:10px;margin-top:28px}.founderProgress button{width:44px;height:5px;border:0;border-radius:99px;background:rgba(255,255,255,.16);cursor:pointer;transition:width.28s ease,background.28s ease,box-shadow.28s ease}.founderProgress button.active{width:72px;background:var(--sun);box-shadow:0 0 18px rgba(255,184,107,.55)}
@keyframes founderOrbit{to{transform:rotate(360deg)}}

@media(max-width:980px){.founderSequence{min-height:auto}.founderSticky{position:relative;top:auto;min-height:0;grid-template-columns:1fr;padding:20px;border-radius:32px}.founderStage{min-height:430px}.founderCopyPanel{min-height:320px}.founderInfoStack{min-height:230px}
}
@media(max-width:620px){.founderStage{min-height:360px}.founderVisual img{width:92%;height:84%}.founderCopyPanel>h2{font-size:clamp(30px,10vw,48px)}
}


/* ===== V21 targeted case cleanup only ===== */
#portfolio.portfolioIntro,
#portfolio.cleanIntro{display:none!important}
#portfolio.cleanInfo{bottom:clamp(150px,19vh,210px)!important;width:min(620px,48vw)!important}
#portfolio.cleanInfo h2{font-size:clamp(38px,4.7vw,72px)!important;line-height:.9!important;max-width:660px!important}
#portfolio.cleanInfo p{font-size:clamp(15px,1.18vw,18px)!important;max-width:560px!important}
#portfolio.cleanRail{left:auto!important;right:var(--pad)!important;bottom:30px!important;width:min(760px,48vw)!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important}
#portfolio.cleanRail.netflixCard{min-height:94px!important;border-radius:16px!important}
#portfolio.cleanRail.netflixCard:after{background:linear-gradient(180deg,rgba(0,0,0,.02),rgba(0,0,0,.16))!important}
#portfolio.cleanRail.netflixMeta{display:none!important}
#portfolio.cleanRail.netflixCard img{filter:saturate(.92) brightness(.72)!important}
#portfolio.cleanRail.netflixCard:hover,
#portfolio.cleanRail.netflixCard.active{transform:translateY(-6px) scale(1.03)!important}
#portfolio.cleanRail.netflixCard:hover img,
#portfolio.cleanRail.netflixCard.active img{filter:saturate(1.08) brightness(.92)!important}
@media(max-width:1100px){
  #portfolio.cleanInfo{width:min(680px,70vw)!important;bottom:190px!important}
  #portfolio.cleanRail{width:min(640px,58vw)!important}
}
@media(max-width:980px){
  #portfolio.cleanInfo{width:auto!important;bottom:auto!important}
  #portfolio.cleanRail{width:auto!important;left:auto!important;right:auto!important;bottom:auto!important;grid-template-columns:repeat(4,minmax(82px,1fr))!important}
  #portfolio.cleanRail.netflixCard{min-height:92px!important}
}
@media(max-width:620px){
  #portfolio.cleanRail{grid-template-columns:repeat(2,1fr)!important}
  #portfolio.cleanRail.netflixCard{min-height:112px!important}
}


/* ===== V22 Founder only targeted fixes ===== */
#about.founderCopyPanel > h2,
#about.founderProgress,
#about.founderVisual figcaption{display:none!important}
#about.founderSequence{min-height:360vh}
#about.founderSticky{grid-template-columns:minmax(0,1.02fr) minmax(390px,.86fr)}
#about.founderStage{border:0!important;background:transparent!important;box-shadow:none!important;overflow:visible!important}
#about.founderOrbit{opacity:.34;border-color:rgba(255,184,107,.14)!important;box-shadow:0 0 50px rgba(255,184,107,.08)!important}
#about.founderVisual:before{bottom:5%;width:74%;height:18%;background:radial-gradient(circle,rgba(255,184,107,.22),rgba(127,92,255,.12) 34%,transparent 72%)}
#about.founderVisual img{filter:drop-shadow(0 38px 48px rgba(0,0,0,.46)) drop-shadow(0 0 42px rgba(255,184,107,.13))!important;outline:0!important;border:0!important;background:transparent!important}
#about.founderCopyPanel{min-height:300px;justify-content:center}
#about.founderCopyPanel >.kicker{margin-bottom:24px}
#about.founderInfoStack{min-height:280px}
#about.founderInfo{top:0;bottom:auto}
#about.founderInfo span{margin-bottom:12px}
#about.founderInfo h3{font-size:clamp(42px,5vw,76px);line-height:.9}
#about.founderInfo p{max-width:620px;font-size:clamp(17px,1.5vw,20px)}
@media(max-width:980px){
  #about.founderSequence{min-height:auto}
  #about.founderSticky{grid-template-columns:1fr}
  #about.founderStage{min-height:390px}
}
@media(max-width:620px){
  #about.founderInfo h3{font-size:clamp(34px,12vw,54px)}
  #about.founderInfoStack{min-height:320px}
}


/* ===== V23 targeted fixes: cases and founders only ===== */.cleanInfo{bottom:clamp(255px,34vh,360px)!important;}.cleanInfo h2{font-size:clamp(42px,5vw,74px)!important;max-width:900px!important;}.cleanInfo p{max-width:720px!important;}.cleanRail{right:var(--pad)!important;left:auto!important;width:min(680px,45vw)!important;grid-template-columns:repeat(4,minmax(100px,1fr))!important;gap:10px!important;bottom:30px!important;}.cleanRail.netflixCard{min-height:118px!important;border-radius:16px!important;}.cleanRail.netflixMeta{display:none!important;}.about{padding-top:clamp(80px,9vw,130px)!important;padding-bottom:clamp(80px,9vw,130px)!important;}.founderSequence,.roleShowcase,.compactPhilosophy{display:none!important;}.founderSideBySide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:clamp(24px,4vw,42px);}.founderCard{position:relative;overflow:hidden;min-height:560px;border:1px solid rgba(255,255,255,.11);border-radius:30px;background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.025));box-shadow:0 28px 100px rgba(0,0,0,.34);transition:transform.28s ease,border-color.28s ease,box-shadow.28s ease;}.founderCard:hover{transform:translateY(-8px);border-color:rgba(255,184,107,.42);box-shadow:0 36px 110px rgba(0,0,0,.42),0 0 36px rgba(255,184,107,.12);}.founderCard:before{content:"";position:absolute;inset:-20% -28% auto auto;width:90%;height:54%;background:radial-gradient(circle,rgba(127,92,255,.20),transparent 65%);filter:blur(20px);pointer-events:none;}.founderCard:after{content:"";position:absolute;inset:auto -28% 20% -28%;height:42%;background:radial-gradient(circle,rgba(255,184,107,.15),transparent 66%);filter:blur(18px);pointer-events:none;}.founderImage{position:absolute;inset:20px 18px auto 18px;height:330px;display:grid;place-items:end center;z-index:1;}.founderImage img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 28px 42px rgba(0,0,0,.42));transform:scale(1.02);transition:transform.35s ease,filter.35s ease;}.founderCard:hover.founderImage img{transform:scale(1.07) translateY(-4px);filter:drop-shadow(0 34px 50px rgba(0,0,0,.48));}.founderContent{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:clamp(22px,2.4vw,30px);background:linear-gradient(180deg,transparent,rgba(5,5,5,.80) 18%,rgba(5,5,5,.96) 100%);}.founderContent h3{margin:0;font-size:clamp(25px,2.5vw,38px);line-height:.95;letter-spacing:-.04em;}.founderContent span{display:block;margin:10px 0 12px;color:var(--sun);font-size:12px;font-weight:950;letter-spacing:.13em;text-transform:uppercase;}.founderContent p{margin:0;color:rgba(255,248,239,.72);font-size:15px;line-height:1.6;}
@media(max-width:1100px){.cleanInfo{bottom:250px!important}.cleanRail{width:min(760px,60vw)!important}.founderSideBySide{grid-template-columns:1fr}.founderCard{min-height:480px}.founderImage{height:280px}}
@media(max-width:980px){.cleanInfo{bottom:auto!important}.cleanRail{width:auto!important;left:auto!important;right:auto!important}.founderSideBySide{gap:14px}}


/* V24: nur gewünschte Korrekturen */.miniNav{display:none!important;}.sitePreview{padding-top:28px;}
@media(min-width:981px){.cleanInfo{top:clamp(138px,16vh,178px)!important;bottom:auto!important;}.netflixInfo{top:clamp(138px,16vh,178px)!important;bottom:auto!important;}
}
@media(max-width:980px){.cleanInfo,.netflixInfo{top:auto!important;bottom:auto!important;}
}



/* ===== V25 targeted: spacy preloader and copy cleanup ===== */.preloader{
  background:
    radial-gradient(circle at 50% 50%,rgba(255,184,107,.08),transparent 20vw),
    radial-gradient(circle at 18% 30%,rgba(127,92,255,.16),transparent 24vw),
    radial-gradient(circle at 84% 58%,rgba(100,239,255,.10),transparent 24vw),
    #050505;
  overflow:hidden;
}.preloader:before,.preloader:after{
  content:"";
  position:absolute;
  inset:-20%;
  pointer-events:none;
  background-image:radial-gradient(circle,rgba(255,255,255,.28) 0 1px,transparent 1.4px);
  background-size:58px 58px;
  opacity:.18;
  animation:preStarDrift 7s linear infinite;
}.preloader:after{
  background-size:91px 91px;
  opacity:.12;
  animation-duration:11s;
  animation-direction:reverse;
}.supernovaCore{
  isolation:isolate;
  background:
    conic-gradient(from 0deg,rgba(100,239,255,.10),rgba(127,92,255,.24),rgba(255,184,107,.42),rgba(255,255,255,.14),rgba(100,239,255,.10)),
    radial-gradient(circle at center,rgba(255,255,255,1) 0 1.3%,rgba(255,184,107,.98) 4%,rgba(231,119,58,.62) 12%,rgba(127,92,255,.30) 26%,rgba(100,239,255,.16) 40%,transparent 60%)!important;
  filter:drop-shadow(0 0 90px rgba(255,184,107,.36)) drop-shadow(0 0 120px rgba(127,92,255,.18));
}.preStars{position:absolute;inset:-38%;border-radius:50%;background-image:radial-gradient(circle,rgba(255,255,255,.9) 0 1px,transparent 1.8px),radial-gradient(circle,rgba(255,184,107,.7) 0 1px,transparent 1.8px);background-size:42px 42px,67px 67px;opacity:.16;animation:preGalaxySpin 9s linear infinite;z-index:-1}.preStars.sB{inset:-54%;opacity:.10;background-size:74px 74px,101px 101px;animation-duration:14s;animation-direction:reverse}.preOrbit{position:absolute;inset:6%;border-radius:50%;border:1px solid rgba(255,255,255,.14);transform:rotateX(64deg) rotateZ(0deg);animation:preOrbitSpin 2.6s linear infinite;z-index:1}.preOrbit.o2{inset:0;border-color:rgba(100,239,255,.18);transform:rotateX(72deg) rotateZ(44deg);animation-duration:3.4s;animation-direction:reverse}.preOrbit.o3{inset:16%;border-color:rgba(255,184,107,.20);transform:rotateX(58deg) rotateZ(86deg);animation-duration:2.2s}.preOrbit:after{content:"";position:absolute;left:50%;top:-4px;width:8px;height:8px;border-radius:50%;background:#fff8ef;box-shadow:0 0 18px rgba(255,184,107,.8),0 0 34px rgba(127,92,255,.4)}.preShockwave{position:absolute;inset:24%;border-radius:50%;border:1px solid rgba(255,248,239,.22);box-shadow:0 0 36px rgba(255,184,107,.16);animation:preShock 1.35s ease-out infinite;z-index:0}.preShockwave.sw2{animation-delay:.42s;border-color:rgba(100,239,255,.18)}.preloaderLogo{z-index:5}.preloaderText{position:relative;z-index:4;color:rgba(255,248,239,.84);text-shadow:0 0 24px rgba(255,184,107,.18)}
@keyframes preStarDrift{to{transform:translate3d(58px,58px,0)}}
@keyframes preGalaxySpin{to{transform:rotate(360deg)}}
@keyframes preOrbitSpin{to{transform:rotateX(64deg) rotateZ(360deg)}}
@keyframes preShock{0%{transform:scale(.55);opacity:.65}100%{transform:scale(2.45);opacity:0}}


/* ===== V26: seriöseres Kampagnen Dashboard ===== */.dashboard{
  border:1px solid rgba(255,255,255,.13)!important;
  border-radius:28px!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.028))!important;
  box-shadow:0 30px 90px rgba(0,0,0,.42)!important;
  padding:clamp(22px,3vw,34px)!important;
}.dashboard:before{display:none!important}
#flare{opacity:.14!important;filter:saturate(.55) brightness(.72)}.dashContent{position:relative;z-index:2}.metrics{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:12px!important;
  margin-bottom:18px!important;
}.metric{
  border:1px solid rgba(255,255,255,.11)!important;
  border-radius:18px!important;
  padding:16px 18px!important;
  background:rgba(255,255,255,.035)!important;
  box-shadow:none!important;
}.metric small{
  color:rgba(255,248,239,.62)!important;
  font-size:12px!important;
  line-height:1.25!important;
  font-weight:750!important;
  letter-spacing:.02em!important;
  text-transform:none!important;
}.metric b{
  font-size:clamp(26px,3vw,42px)!important;
  line-height:1!important;
  letter-spacing:-.035em!important;
  color:#fff8ef!important;
}.channelPills{
  gap:8px!important;
  margin:10px 0 18px!important;
}.channelPills span{
  padding:8px 12px!important;
  border-radius:999px!important;
  border:1px solid rgba(255,255,255,.12)!important;
  background:rgba(255,255,255,.035)!important;
  color:rgba(255,248,239,.76)!important;
  font-size:11px!important;
  font-weight:850!important;
  letter-spacing:.06em!important;
}.chart{
  height:230px!important;
  border:1px solid rgba(255,255,255,.1)!important;
  border-radius:22px!important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.025),rgba(0,0,0,.16)),
    repeating-linear-gradient(0deg,rgba(255,255,255,.045) 0 1px,transparent 1px 44px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 74px)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
}.chart:before{
  content:"";
  position:absolute;
  left:18px;
  right:18px;
  top:18px;
  height:1px;
  background:linear-gradient(90deg,rgba(255,184,107,.28),transparent);
  opacity:.55;
}.chart path{
  stroke:var(--sun)!important;
  stroke-width:3.2!important;
  filter:drop-shadow(0 0 8px rgba(255,184,107,.34))!important;
}.rangeWrap{
  margin-top:18px!important;
  gap:10px!important;
}.rangeWrap label{
  color:rgba(255,248,239,.78)!important;
  font-size:12px!important;
  font-weight:850!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
}
input[type=range]{
  accent-color:var(--sun)!important;
  height:4px!important;
}.liveFeed{
  display:grid!important;
  grid-template-columns:1fr 1fr!important;
  gap:10px!important;
  margin-top:14px!important;
}.liveFeed div{
  display:flex!important;
  justify-content:space-between!important;
  gap:14px!important;
  align-items:center!important;
  border-radius:16px!important;
  padding:13px 15px!important;
  background:rgba(255,255,255,.028)!important;
  border:1px solid rgba(255,255,255,.09)!important;
  font-size:13px!important;
  color:rgba(255,248,239,.62)!important;
}.liveFeed b{
  color:#fff8ef!important;
  font-weight:850!important;
}
@media(max-width:760px){.metrics{grid-template-columns:1fr!important}.liveFeed{grid-template-columns:1fr!important}.chart{height:190px!important}
}.menuCard{min-height:260px;display:grid;place-items:center;overflow:hidden;position:relative}.menuRocketScene{position:relative;width:min(100%,440px);aspect-ratio:1.5/1;display:grid;place-items:center}.menuRocketScene:before{content:"";position:absolute;inset:-8% -4%;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.06),transparent 34%),radial-gradient(circle at 26% 28%,rgba(100,239,255,.14),transparent 24%),radial-gradient(circle at 76% 22%,rgba(127,92,255,.16),transparent 26%),radial-gradient(circle at 50% 76%,rgba(255,184,107,.14),transparent 30%);filter:blur(8px)}.menuOrbit{position:absolute;border:1px solid rgba(255,255,255,.08);border-radius:50%;inset:14% 20%;animation:orbitFloat 8s ease-in-out infinite}.menuOrbit.orbitTwo{inset:2% 6%;border-color:rgba(255,255,255,.05);animation-duration:11s;transform:rotate(-16deg)}.menuSpark{position:absolute;width:6px;height:6px;border-radius:50%;background:linear-gradient(135deg,var(--sun),#fff);box-shadow:0 0 18px rgba(255,184,107,.45);opacity:.8;animation:starPulse 3.6s ease-in-out infinite}.menuSpark.s1{top:18%;left:16%}.menuSpark.s2{top:26%;right:18%;animation-delay:.7s}.menuSpark.s3{bottom:18%;left:24%;animation-delay:1.2s}.menuSpark.s4{bottom:22%;right:20%;animation-delay:1.9s}.rocketTrail{position:absolute;left:50%;top:50%;width:54%;height:2px;background:linear-gradient(90deg,rgba(100,239,255,0),rgba(100,239,255,.7),rgba(127,92,255,.34),rgba(255,184,107,0));filter:blur(1px);transform:translate(-58%,-50%) rotate(-26deg);opacity:.75}.menuRocket{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(26deg);animation:rocketDrift 4.8s ease-in-out infinite}.rocketGlow{position:absolute;inset:-28px;background:radial-gradient(circle,rgba(255,184,107,.24),transparent 64%);filter:blur(10px)}.rocketBody{position:relative;width:72px;height:148px;border-radius:44px 44px 32px 32px;background:linear-gradient(180deg,#fbf8f3 0%,#d8d1c8 56%,#b7ada2 100%);box-shadow:0 16px 45px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.2)}.rocketBody:before{content:"";position:absolute;left:50%;top:10px;transform:translateX(-50%);width:42px;height:62px;border-radius:22px 22px 12px 12px;background:linear-gradient(180deg,var(--violet),#8f73ff 54%,#64efff 100%);clip-path:polygon(50% 0,100% 100%,0 100%);opacity:.95}.rocketWindow{position:absolute;left:50%;top:58px;transform:translateX(-50%);width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff, #78efff 32%, #3252a6 72%);box-shadow:0 0 0 5px rgba(255,255,255,.16),0 0 18px rgba(100,239,255,.36)}.rocketFin{position:absolute;bottom:30px;width:26px;height:44px;background:linear-gradient(180deg,var(--orange),var(--sun));z-index:-1}.rocketFin.finLeft{left:-14px;border-radius:20px 0 0 20px;clip-path:polygon(100% 0,100% 100%,0 72%)}.rocketFin.finRight{right:-14px;border-radius:0 20px 20px 0;clip-path:polygon(0 0,100% 72%,0 100%)}.rocketFlame{position:absolute;left:50%;bottom:-26px;transform:translateX(-50%);width:24px;height:48px;background:radial-gradient(circle at 50% 20%,#fff8e8 0 18%,var(--sun) 38%,var(--orange) 60%,rgba(231,119,58,0) 82%);filter:blur(.6px);clip-path:polygon(50% 100%,0 12%,22% 0,50% 16%,78% 0,100% 12%);animation:flamePulse.9s ease-in-out infinite}
    @keyframes rocketDrift{0%,100%{transform:translate(-50%,-50%) rotate(26deg) translateY(0)}50%{transform:translate(-50%,-52%) rotate(22deg) translateY(-8px)}}
    @keyframes flamePulse{0%,100%{transform:translateX(-50%) scaleY(1);opacity:.92}50%{transform:translateX(-50%) scaleY(1.18);opacity:1}}
    @keyframes orbitFloat{0%,100%{transform:rotate(0deg) scale(1)}50%{transform:rotate(8deg) scale(1.02)}}
    @keyframes starPulse{0%,100%{opacity:.42;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}
    @media(max-width:760px){.menuCard{min-height:220px}.menuRocketScene{width:min(100%,320px)}.rocketBody{width:58px;height:120px}.rocketBody:before{width:34px;height:50px}.rocketWindow{top:48px}.rocketFin{width:22px;height:36px}}.menuCard{min-height:280px;display:grid;place-items:center;overflow:hidden;position:relative}.realRocketScene{position:relative;width:min(100%,430px);height:260px;display:grid;place-items:center}.realRocketScene:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 80%,rgba(231,119,58,.10),transparent 24%),radial-gradient(circle at 24% 28%,rgba(100,239,255,.10),transparent 20%),radial-gradient(circle at 78% 24%,rgba(127,92,255,.12),transparent 24%);filter:blur(8px)}.menuOrbit{position:absolute;border:1px solid rgba(255,255,255,.07);border-radius:50%;animation:orbitFloat 8s ease-in-out infinite}.menuOrbit.orbitOne{inset:12% 20%}.menuOrbit.orbitTwo{inset:4% 9%;transform:rotate(-12deg);animation-duration:10s}.menuStar{position:absolute;width:4px;height:4px;border-radius:50%;background:#fff7ef;box-shadow:0 0 12px rgba(255,255,255,.35);opacity:.8;animation:starPulse 3.2s ease-in-out infinite}.menuStar.s1{left:14%;top:20%}.menuStar.s2{right:18%;top:18%;animation-delay:.6s}.menuStar.s3{left:24%;bottom:16%;animation-delay:1.1s}.menuStar.s4{right:21%;bottom:22%;animation-delay:1.7s}.menuRocketWrap{position:relative;display:grid;place-items:center;animation:rocketHover 4.4s ease-in-out infinite}.rocketAura{position:absolute;inset:auto 50% 14px auto;transform:translateX(50%);width:170px;height:170px;border-radius:50%;background:radial-gradient(circle,rgba(255,184,107,.13),rgba(231,119,58,.08) 38%,rgba(127,92,255,.06) 56%,transparent 72%);filter:blur(18px)}.menuRocketImg{position:relative;width:min(150px,34vw);height:auto;display:block;filter:drop-shadow(0 16px 38px rgba(0,0,0,.34)) drop-shadow(0 0 12px rgba(255,184,107,.18))}
    @keyframes rocketHover{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
    @keyframes orbitFloat{0%,100%{transform:rotate(0deg) scale(1)}50%{transform:rotate(8deg) scale(1.02)}}
    @keyframes starPulse{0%,100%{opacity:.35;transform:scale(.8)}50%{opacity:1;transform:scale(1.18)}}
    @media(max-width:760px){.menuCard{min-height:230px}.realRocketScene{height:210px}.menuRocketImg{width:min(118px,38vw)}}


/* v29 menu rocket tweak */
nav.menu >.menuCard{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;min-height:420px;display:grid;place-items:center;align-self:center}
nav.menu >.menuCard::before, nav.menu >.menuCard::after{display:none!important}.realRocketScene{width:min(100%,560px)!important;height:420px!important;overflow:visible}.realRocketScene:before{inset:-8%!important;background:radial-gradient(circle at 50% 78%,rgba(231,119,58,.12),transparent 22%),radial-gradient(circle at 24% 26%,rgba(100,239,255,.10),transparent 18%),radial-gradient(circle at 78% 20%,rgba(127,92,255,.12),transparent 22%)!important}.menuOrbit.orbitOne{inset:10% 18%!important}.menuOrbit.orbitTwo{inset:0 4%!important}.menuRocketWrap{transform:rotate(8deg);animation:rocketHoverVertical 4.6s ease-in-out infinite!important}.menuRocketImg{width:min(260px,42vw)!important;filter:drop-shadow(0 22px 44px rgba(0,0,0,.34)) drop-shadow(0 0 14px rgba(255,184,107,.18))!important}.rocketAura{width:240px!important;height:240px!important;bottom:6px!important}
@keyframes rocketHoverVertical{0%,100%{transform:translateY(0) rotate(8deg)}50%{transform:translateY(-10px) rotate(5deg)}}
@media(max-width:980px){nav.menu >.menuCard{min-height:300px}.realRocketScene{height:300px!important;width:min(100%,380px)!important}.menuRocketImg{width:min(190px,46vw)!important}}
@media(max-width:760px){nav.menu >.menuCard{min-height:240px}.realRocketScene{height:240px!important;width:min(100%,300px)!important}.menuRocketImg{width:min(150px,48vw)!important}}



    /* v30 menu fullscreen cosmos */.menu{position:fixed;inset:0;overflow:hidden;isolation:isolate}.menu::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(5,8,20,.86),rgba(5,5,5,.96));z-index:-3}.menuCosmos{position:absolute;inset:-8%;z-index:-2;overflow:hidden;pointer-events:none}.menuNebula,.menuOrbit,.menuStarField,.menuPulse{position:absolute;display:block;pointer-events:none}.menuNebula{filter:blur(26px);mix-blend-mode:screen;opacity:.9;animation:menuDrift 15s ease-in-out infinite}.menuNebula.nebulaA{width:48vw;height:48vw;left:-8vw;top:-6vh;background:radial-gradient(circle,rgba(100,239,255,.20),rgba(100,239,255,.08) 28%,transparent 62%)}.menuNebula.nebulaB{width:56vw;height:56vw;right:-10vw;top:0;background:radial-gradient(circle,rgba(127,92,255,.22),rgba(127,92,255,.10) 32%,transparent 66%);animation-delay:-4s}.menuNebula.nebulaC{width:60vw;height:60vw;left:22vw;bottom:-22vh;background:radial-gradient(circle,rgba(255,184,107,.18),rgba(231,119,58,.08) 32%,transparent 68%);animation-delay:-8s}.menuOrbit{border:1px solid rgba(255,255,255,.07);border-radius:50%;mix-blend-mode:screen;animation:orbitSpin 22s linear infinite}.menuOrbit.orbitA{width:68vw;height:68vw;left:-6vw;top:2vh}.menuOrbit.orbitB{width:50vw;height:50vw;right:4vw;top:14vh;animation-direction:reverse;animation-duration:28s}.menuOrbit.orbitC{width:84vw;height:84vw;left:8vw;top:-16vh;opacity:.55;animation-duration:38s}.menuStarField{inset:0;opacity:.55}.menuStarField::before,.menuStarField::after{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,248,239,.95) 0 1px,transparent 1.2px);background-size:72px 72px;opacity:.5}.menuStarField.fieldA::before{transform:translate3d(0,0,0);animation:starDrift 18s linear infinite}.menuStarField.fieldA::after{background-size:118px 118px;opacity:.28;animation:starDrift 26s linear infinite reverse}.menuStarField.fieldB::before{background-size:150px 150px;opacity:.18;animation:starDrift 34s linear infinite}.menuStarField.fieldB::after{display:none}.menuPulse{border-radius:50%;filter:blur(10px);opacity:.6;animation:pulseFloat 8s ease-in-out infinite}.menuPulse.pulseA{width:18px;height:18px;right:16vw;top:18vh;background:radial-gradient(circle,#fff,rgba(100,239,255,.7) 40%,transparent 72%)}.menuPulse.pulseB{width:14px;height:14px;left:14vw;bottom:20vh;background:radial-gradient(circle,#fff,rgba(255,184,107,.8) 38%,transparent 74%);animation-delay:-3s}.menu.menuLinks{position:relative;z-index:2;max-width:min(920px,82vw)}.menu.menuLinks a{color:rgba(255,248,239,.78);text-shadow:0 10px 28px rgba(0,0,0,.28)}.menu.menuLinks a:hover{color:#fff;transform:translateX(12px)}
    @keyframes menuDrift{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,-14px,0) scale(1.03)}}
    @keyframes orbitSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
    @keyframes starDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(-32px,22px,0)}}
    @keyframes pulseFloat{0%,100%{transform:translateY(0) scale(1);opacity:.45}50%{transform:translateY(-10px) scale(1.2);opacity:.9}}
    @media(max-width:760px){.menu.menuLinks{max-width:88vw}.menuOrbit.orbitA{width:92vw;height:92vw;left:-18vw;top:12vh}.menuOrbit.orbitB{width:80vw;height:80vw;right:-10vw;top:30vh}.menuOrbit.orbitC{width:120vw;height:120vw;left:-10vw;top:-6vh}.menuNebula.nebulaA{width:82vw;height:82vw;left:-18vw;top:0}.menuNebula.nebulaB{width:90vw;height:90vw;right:-20vw;top:8vh}.menuNebula.nebulaC{width:108vw;height:108vw;left:-4vw;bottom:-18vh}
    }





/* v32 hero H1 text-only shine effect */.hero h1{
  text-shadow:0 24px 80px rgba(0,0,0,.68)!important;
}.hero h1 span{
  display:block;
  background:
    linear-gradient(105deg,
      #ffffff 0%,
      #fff4e8 24%,
      #ffb86b 42%,
      #ffffff 50%,
      #ffb86b 58%,
      #fff4e8 74%,
      #ffffff 100%);
  background-size:260% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent!important;
  animation:heroTextOnlyShine 5.5s ease-in-out infinite;
}.hero h1:before,.hero h1:after{
  content:none!important;
  display:none!important;
}
@keyframes heroTextOnlyShine{
  0%,100%{background-position:0% 50%;}
  48%,58%{background-position:100% 50%;}
}



/* v36 subtle spacy mouse effect */
.mouseCosmos{position:fixed;left:0;top:0;width:0;height:0;z-index:180;pointer-events:none;opacity:0;transition:opacity .25s ease;mix-blend-mode:screen}
.mouseCosmos.is-active{opacity:1}
.mouseGlow{position:absolute;left:var(--mx,50vw);top:var(--my,50vh);width:260px;height:260px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,184,107,.18) 0%,rgba(231,119,58,.10) 28%,rgba(127,92,255,.08) 46%,rgba(100,239,255,.04) 58%,transparent 72%);filter:blur(20px)}
.mouseRing{position:absolute;left:var(--mx,50vw);top:var(--my,50vh);width:78px;height:78px;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(255,255,255,.16);box-shadow:0 0 22px rgba(255,184,107,.18),inset 0 0 18px rgba(100,239,255,.08);animation:mouseRingPulse 2.4s ease-in-out infinite}
.mouseRing:before,.mouseRing:after{content:"";position:absolute;border-radius:50%;background:#fff;box-shadow:0 0 14px rgba(255,255,255,.55)}
.mouseRing:before{width:3px;height:3px;left:10px;top:18px}
.mouseRing:after{width:2px;height:2px;right:14px;bottom:16px;background:var(--sun)}
@keyframes mouseRingPulse{0%,100%{transform:translate(-50%,-50%) scale(.96);opacity:.62}50%{transform:translate(-50%,-50%) scale(1.08);opacity:.95}}
@media(pointer:coarse){.mouseCosmos{display:none}}


/* v37 founder social icons */
.founderSocials{position:relative;z-index:3;display:flex;gap:10px;margin-top:18px;align-items:center}
.founderSocial{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.055);box-shadow:inset 0 1px 0 rgba(255,255,255,.10);transition:transform .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease}
.founderSocial svg{width:21px;height:21px;fill:rgba(255,248,239,.88);transition:fill .22s ease,transform .22s ease}
.founderSocial span{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.founderSocial:hover{transform:translateY(-3px);border-color:rgba(255,184,107,.52);background:rgba(255,184,107,.12);box-shadow:0 14px 34px rgba(0,0,0,.22),0 0 22px rgba(255,184,107,.14)}
.founderSocial:hover svg{fill:#fff;transform:scale(1.06)}
@media(max-width:760px){.founderSocials{justify-content:center}.founderSocial{width:40px;height:40px}}


/* v39 Case Auswahl ohne sichtbare Umrisse */
#portfolio .cleanRail .netflixCard,
#portfolio .netflixRail .netflixCard,
#portfolio .netflixCard,
.cleanRail .netflixCard,
.netflixRail .netflixCard{
  border-color:transparent !important;
  outline:none !important;
}
#portfolio .cleanRail .netflixCard:hover,
#portfolio .cleanRail .netflixCard.active,
#portfolio .netflixRail .netflixCard:hover,
#portfolio .netflixRail .netflixCard.active,
#portfolio .netflixCard:hover,
#portfolio .netflixCard.active,
.cleanRail .netflixCard:hover,
.cleanRail .netflixCard.active,
.netflixRail .netflixCard:hover,
.netflixRail .netflixCard.active{
  border-color:transparent !important;
  outline:none !important;
}



/* v50 contact scroll focus, grows during scroll then releases */
#kontakt.contactFocusScroll,
#kontakt{ }
#kontakt.contactFocusScroll{position:relative;min-height:190vh;padding:0 !important;background:#050505;isolation:isolate}
#kontakt.contactFocusScroll > .wrap{position:sticky;top:0;min-height:100vh;display:grid;align-items:center;padding-top:clamp(70px,8vh,100px);padding-bottom:clamp(30px,5vh,70px)}
#kontakt.contactFocusScroll .launchPanel.contactPanelWrap{width:var(--contactW, min(1160px, calc(100vw - 48px)));min-height:var(--contactH, min(760px, calc(100vh - 120px)));margin-inline:auto;border-radius:var(--contactR, 34px);transform:scale(var(--contactScale, .88));transform-origin:center center;transition:border-radius .12s linear, box-shadow .12s linear;background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));box-shadow:0 30px 90px rgba(0,0,0,.34),0 0 calc(var(--contactGlow, 18px)) rgba(255,184,107,.14);overflow:hidden}
#kontakt.contactFocusScroll.is-focus .launchPanel.contactPanelWrap{box-shadow:0 42px 120px rgba(0,0,0,.48),0 0 80px rgba(255,184,107,.16)}
#kontakt.contactFocusScroll .contactContentGrid{min-height:100%;align-items:center}
#kontakt.contactFocusScroll:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 45%,rgba(255,184,107,.14),transparent 34%),rgba(0,0,0,var(--contactDim,0));opacity:var(--contactFocus,0);z-index:1}
#kontakt.contactFocusScroll .wrap{z-index:2}
@media(max-width:980px){#kontakt.contactFocusScroll{min-height:170vh}#kontakt.contactFocusScroll .launchPanel.contactPanelWrap{min-height:auto;width:calc(100vw - 28px)}}



/* v53 compact availability + creative social */
#kontakt .availabilitySocialGrid{
  margin-top:18px !important;
  max-width:860px !important;
}
#kontakt .openStateCard{
  padding:0 !important;
  display:grid !important;
  grid-template-columns:minmax(170px,.42fr) minmax(0,1fr) !important;
  gap:18px 26px !important;
  align-items:end !important;
  min-height:0 !important;
}
#kontakt .openStateCard > .kicker{
  grid-column:1 / -1 !important;
  margin-bottom:0 !important;
  font-size:13px !important;
}
#kontakt .openStateTop{
  margin-top:0 !important;
}
#kontakt .openStateTop small{
  margin-bottom:6px !important;
  font-size:11px !important;
}
#kontakt .openStateTop h3{
  font-size:clamp(34px,4.2vw,54px) !important;
  line-height:.9 !important;
  margin:0 !important;
}
#kontakt .openBadge{
  margin-top:8px !important;
  padding:9px 13px !important;
  font-size:11px !important;
  letter-spacing:.12em !important;
}
#kontakt #openHint{
  margin:0 !important;
  font-size:clamp(15px,1.25vw,18px) !important;
  line-height:1.55 !important;
  max-width:620px !important;
  align-self:end !important;
}
#kontakt .statusDot{width:8px !important;height:8px !important}

.socialStandalone{
  padding-top:clamp(28px,5vh,58px) !important;
  padding-bottom:clamp(66px,8vh,110px) !important;
  background:radial-gradient(circle at 18% 10%,rgba(100,239,255,.08),transparent 28vw),radial-gradient(circle at 84% 16%,rgba(127,92,255,.12),transparent 32vw),#050505;
}
.socialStandalonePanel{
  border:0 !important;
  border-radius:36px !important;
  padding:clamp(30px,4vw,48px) !important;
  background:radial-gradient(circle at 78% 20%,rgba(127,92,255,.20),transparent 34%),radial-gradient(circle at 18% 84%,rgba(231,119,58,.16),transparent 34%),linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.022)) !important;
  box-shadow:0 34px 120px rgba(0,0,0,.42),inset 0 0 0 1px rgba(255,255,255,.08) !important;
  overflow:hidden !important;
}
.socialStandalonePanel:before{
  content:"" !important;
  position:absolute !important;
  inset:-45% -20% auto auto !important;
  width:620px !important;
  height:620px !important;
  border-radius:50% !important;
  background:conic-gradient(from 120deg,rgba(100,239,255,.0),rgba(100,239,255,.18),rgba(127,92,255,.20),rgba(255,184,107,.14),rgba(100,239,255,0)) !important;
  filter:blur(10px) !important;
  opacity:.7 !important;
  animation:socialOrbitGlow 18s linear infinite !important;
}
.socialStandalonePanel:after{
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(circle,rgba(255,255,255,.32) 0 1px,transparent 1.2px);
  background-size:58px 58px;
  opacity:.12;
  pointer-events:none;
}
.socialStandalonePanel .kicker,
.socialStandalonePanel h3,
.socialStandalonePanel p,
.socialStandalonePanel .socialChannelGrid{
  position:relative;
  z-index:2;
}
.socialStandalonePanel h3{
  max-width:720px;
  font-size:clamp(34px,4.2vw,62px) !important;
  line-height:.92 !important;
  margin:14px 0 12px !important;
}
.socialStandalonePanel p{
  max-width:600px !important;
  margin-bottom:28px !important;
  font-size:17px !important;
}
.socialChannelGrid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:16px !important;
  align-items:stretch !important;
}
.socialChannel{
  min-height:172px !important;
  padding:20px !important;
  border-radius:28px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:space-between !important;
  align-items:flex-start !important;
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.028)) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:0 18px 60px rgba(0,0,0,.22),inset 0 0 0 1px rgba(255,255,255,.03) !important;
  overflow:hidden !important;
  isolation:isolate !important;
}
.socialChannel:before{
  content:"";
  position:absolute;
  inset:auto -30% -45% auto;
  width:160px;
  height:160px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,184,107,.20),transparent 68%);
  filter:blur(10px);
  opacity:.55;
  transform:scale(.9);
  transition:transform .28s ease,opacity .28s ease;
  z-index:-1;
}
.socialChannel:nth-child(2):before{background:radial-gradient(circle,rgba(100,239,255,.20),transparent 68%)}
.socialChannel:nth-child(3):before{background:radial-gradient(circle,rgba(127,92,255,.22),transparent 68%)}
.socialChannel:nth-child(4):before{background:radial-gradient(circle,rgba(231,119,58,.22),transparent 68%)}
.socialChannel:hover{
  transform:translateY(-8px) scale(1.015) !important;
  border-color:rgba(255,184,107,.32) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04)) !important;
  box-shadow:0 26px 80px rgba(0,0,0,.34),0 0 32px rgba(255,184,107,.10),inset 0 0 0 1px rgba(255,255,255,.06) !important;
}
.socialChannel:hover:before{transform:scale(1.2);opacity:.9}
.socialIcon{
  width:58px !important;
  height:58px !important;
  border-radius:20px !important;
  background:linear-gradient(135deg,rgba(231,119,58,.28),rgba(255,184,107,.10) 48%,rgba(127,92,255,.14)) !important;
  color:var(--sun) !important;
  box-shadow:inset 0 0 0 1px rgba(255,184,107,.22),0 12px 36px rgba(0,0,0,.28) !important;
}
.socialIcon svg{width:24px !important;height:24px !important}
.socialChannel strong{
  font-size:clamp(20px,2vw,28px) !important;
  letter-spacing:-.025em !important;
  line-height:.95 !important;
}
@keyframes socialOrbitGlow{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@media(max-width:980px){
  #kontakt .openStateCard{grid-template-columns:1fr !important;gap:12px !important}
  #kontakt #openHint{max-width:100% !important}
  .socialChannelGrid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}
}
@media(max-width:640px){
  .socialChannelGrid{grid-template-columns:1fr !important}
  .socialChannel{min-height:140px !important}
}



/* v54 social section without outer box */
.socialStandalone{
  padding-top:clamp(44px,6vh,72px) !important;
  padding-bottom:clamp(58px,8vh,100px) !important;
}
.socialStandalonePanel{
  border:0 !important;
  border-radius:0 !important;
  padding:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible !important;
}
.socialStandalonePanel:before,
.socialStandalonePanel:after{
  display:none !important;
  content:none !important;
}
.socialStandalonePanel h3{
  max-width:760px !important;
}
.socialStandalonePanel p{
  margin-bottom:24px !important;
}
.socialChannelGrid{
  gap:18px !important;
}
.socialChannel{
  border:1px solid rgba(255,255,255,.10) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.022)) !important;
  box-shadow:0 18px 50px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.025) !important;
}
.socialChannel:hover{
  border-color:rgba(255,184,107,.30) !important;
  box-shadow:0 24px 68px rgba(0,0,0,.30), 0 0 26px rgba(255,184,107,.08), inset 0 0 0 1px rgba(255,255,255,.05) !important;
}
@media(max-width:760px){
  .socialStandalone{padding-top:34px !important}
}



/* v57 footer spacing */
#kontakt{
  padding-bottom:clamp(54px,7vh,92px) !important;
}
#kontakt .launchPanel.contactPanelWrap{
  margin-bottom:clamp(28px,4vh,52px) !important;
}
footer{
  padding-top:clamp(34px,5vh,58px) !important;
}



/* v59 cases selection right vertical stack */
#portfolio #caseDots.cleanRail,
#caseDots.cleanRail{
  position:absolute !important;
  left:auto !important;
  right:var(--pad) !important;
  top:50% !important;
  bottom:auto !important;
  transform:translateY(-50%) !important;
  width:min(230px,17vw) !important;
  max-height:min(72vh,620px) !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  grid-auto-rows:minmax(92px,1fr) !important;
  gap:12px !important;
  align-items:stretch !important;
  z-index:12 !important;
  padding:0 !important;
}
#portfolio #caseDots .netflixCard,
#caseDots .netflixCard{
  width:100% !important;
  min-height:92px !important;
  height:auto !important;
  aspect-ratio:16/8.5 !important;
  position:relative !important;
}
#portfolio #caseDots .netflixCard:hover,
#caseDots .netflixCard:hover,
#portfolio #caseDots .netflixCard.active,
#caseDots .netflixCard.active{
  transform:translateX(-8px) scale(1.025) !important;
}
#portfolio #caseDots .netflixCard img,
#caseDots .netflixCard img{
  border-radius:0 !important;
}
@media(max-width:1180px){
  #portfolio #caseDots.cleanRail,
  #caseDots.cleanRail{
    width:min(200px,20vw) !important;
    gap:10px !important;
  }
}
@media(max-width:980px){
  #portfolio #caseDots.cleanRail,
  #caseDots.cleanRail{
    position:relative !important;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
    transform:none !important;
    width:auto !important;
    max-height:none !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    grid-auto-rows:auto !important;
    margin-top:20px !important;
  }
  #portfolio #caseDots .netflixCard,
  #caseDots .netflixCard{
    min-height:112px !important;
  }
  #portfolio #caseDots .netflixCard:hover,
  #caseDots .netflixCard:hover,
  #portfolio #caseDots .netflixCard.active,
  #caseDots .netflixCard.active{
    transform:translateY(-5px) scale(1.02) !important;
  }
}



/* v60 webdesign reference carousel */
#webdesign .webRefCarousel{
  margin-top:clamp(22px,3vh,34px);
  width:min(100%,720px);
  display:grid;
  gap:16px;
  position:relative;
  z-index:4;
}
#webdesign .webRefIntroLine{
  color:rgba(255,248,239,.72);
  font-size:clamp(14px,1vw,16px);
  line-height:1.65;
  max-width:680px;
}
#webdesign .webRefStage{
  position:relative;
  min-height:245px;
  border-radius:28px;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  border:1px solid rgba(255,184,107,.14);
  box-shadow:0 24px 70px rgba(0,0,0,.28);
}
#webdesign .webRefSlide{
  position:absolute;
  inset:0;
  padding:22px;
  display:grid;
  grid-template-columns:190px minmax(0,1fr);
  gap:20px;
  align-items:center;
  opacity:0;
  pointer-events:none;
  transform:translateY(14px) scale(.98);
  transition:opacity .45s ease, transform .45s ease;
}
#webdesign .webRefSlide.is-active{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0) scale(1);
}
#webdesign .webRefLogoBox{
  min-height:150px;
  border-radius:22px;
  display:grid;
  place-items:center;
  padding:20px;
  background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.08),transparent 58%),rgba(0,0,0,.24);
  border:1px solid rgba(255,255,255,.08);
}
#webdesign .webRefLogoBox img{
  width:100%;
  max-height:110px;
  object-fit:contain;
  filter:drop-shadow(0 14px 28px rgba(0,0,0,.45));
}
#webdesign .webRefLogoBox.n2 img{max-height:125px}
#webdesign .webRefCopy span{
  display:block;
  color:var(--sun);
  font-size:11px;
  font-weight:950;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:8px;
}
#webdesign .webRefCopy h3{
  margin:0 0 10px;
  font-size:clamp(24px,2.6vw,36px);
  line-height:.98;
  letter-spacing:-.04em;
  text-transform:uppercase;
}
#webdesign .webRefCopy p{
  margin:0;
  color:rgba(255,248,239,.72);
  line-height:1.6;
  font-size:15px;
}
#webdesign .webRefCopy a{
  display:inline-flex;
  margin-top:14px;
  color:#120704;
  background:linear-gradient(135deg,var(--orange),var(--sun));
  border-radius:999px;
  padding:10px 14px;
  font-size:12px;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
}
#webdesign .webRefControls{
  display:flex;
  gap:9px;
  align-items:center;
}
#webdesign .webRefControls button{
  width:42px;
  height:5px;
  border:0;
  border-radius:99px;
  cursor:pointer;
  background:rgba(255,255,255,.16);
  padding:0;
  transition:width .25s ease, background .25s ease, box-shadow .25s ease;
}
#webdesign .webRefControls button.is-active{
  width:74px;
  background:var(--sun);
  box-shadow:0 0 18px rgba(255,184,107,.45);
}
@media(max-width:900px){
  #webdesign .webRefStage{min-height:420px}
  #webdesign .webRefSlide{grid-template-columns:1fr;align-content:center}
  #webdesign .webRefLogoBox{min-height:130px}
}


/* v61 webdesign references wider, no outer box */
.webdesignRefs,
.webRefCarousel,
.webdesignReferenceCarousel,
.webDesignReferences,
.webRefsPanel,
.webRefsCarousel,
.webReferencePanel,
.webReferenceCarousel{
  width:100% !important;
  max-width:none !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
  border:0 !important;
  outline:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
#webdesign .webdesignRefs,
#webdesign .webRefCarousel,
#webdesign .webdesignReferenceCarousel,
#webdesign .webDesignReferences,
#webdesign .webRefsPanel,
#webdesign .webRefsCarousel,
#webdesign .webReferencePanel,
#webdesign .webReferenceCarousel{
  grid-column:1 / -1 !important;
  margin-top:clamp(26px,4vh,46px) !important;
}
#webdesign .webdesignRefs:before,
#webdesign .webdesignRefs:after,
#webdesign .webRefCarousel:before,
#webdesign .webRefCarousel:after,
#webdesign .webdesignReferenceCarousel:before,
#webdesign .webdesignReferenceCarousel:after,
#webdesign .webDesignReferences:before,
#webdesign .webDesignReferences:after,
#webdesign .webRefsPanel:before,
#webdesign .webRefsPanel:after,
#webdesign .webRefsCarousel:before,
#webdesign .webRefsCarousel:after,
#webdesign .webReferencePanel:before,
#webdesign .webReferencePanel:after,
#webdesign .webReferenceCarousel:before,
#webdesign .webReferenceCarousel:after{
  display:none !important;
  content:none !important;
}
#webdesign .webRefTrack,
#webdesign .webReferenceTrack,
#webdesign .webdesignRefsTrack,
#webdesign .webRefsTrack,
#webdesign .referenceTrack{
  width:100% !important;
  max-width:none !important;
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:clamp(14px,2vw,24px) !important;
}
#webdesign .webRefCard,
#webdesign .webReferenceCard,
#webdesign .webdesignRefCard,
#webdesign .referenceCard{
  min-height:clamp(260px,30vw,390px) !important;
}
@media(max-width:980px){
  #webdesign .webRefTrack,
  #webdesign .webReferenceTrack,
  #webdesign .webdesignRefsTrack,
  #webdesign .webRefsTrack,
  #webdesign .referenceTrack{grid-template-columns:1fr !important}
}



/* v63 webdesign references fixed: three vertical cards side by side */
#webdesign .webRefCarousel{
  grid-column:1 / -1 !important;
  width:100% !important;
  max-width:none !important;
  margin-top:clamp(28px,4vh,48px) !important;
  display:grid !important;
  gap:18px !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:0 !important;
}
#webdesign .webRefIntroLine{
  max-width:980px !important;
}
#webdesign .webRefStage{
  position:relative !important;
  min-height:0 !important;
  overflow:visible !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:clamp(16px,2vw,24px) !important;
}
#webdesign .webRefSlide{
  position:relative !important;
  inset:auto !important;
  opacity:1 !important;
  pointer-events:auto !important;
  transform:none !important;
  display:grid !important;
  grid-template-columns:1fr !important;
  align-content:start !important;
  gap:18px !important;
  min-height:390px !important;
  padding:22px !important;
  border-radius:28px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.025)) !important;
  border:1px solid rgba(255,255,255,.09) !important;
  box-shadow:0 22px 70px rgba(0,0,0,.30) !important;
  overflow:hidden !important;
  transition:transform .28s ease,border-color .28s ease,box-shadow .28s ease,background .28s ease !important;
}
#webdesign .webRefSlide:before{
  content:"";
  position:absolute;
  inset:auto -28% -38% auto;
  width:240px;
  height:240px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,184,107,.16),transparent 68%);
  filter:blur(14px);
  opacity:.55;
  transition:transform .3s ease,opacity .3s ease;
}
#webdesign .webRefSlide:nth-child(2):before{background:radial-gradient(circle,rgba(127,92,255,.18),transparent 68%)}
#webdesign .webRefSlide:nth-child(3):before{background:radial-gradient(circle,rgba(100,239,255,.16),transparent 68%)}
#webdesign .webRefSlide:hover{
  transform:translateY(-8px) scale(1.012) !important;
  border-color:rgba(255,184,107,.28) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.035)) !important;
  box-shadow:0 30px 90px rgba(0,0,0,.38),0 0 28px rgba(255,184,107,.08) !important;
}
#webdesign .webRefSlide:hover:before{
  transform:scale(1.18);
  opacity:.9;
}
#webdesign .webRefLogoBox{
  position:relative !important;
  z-index:2 !important;
  min-height:150px !important;
  border-radius:22px !important;
  background:radial-gradient(circle at 50% 40%,rgba(255,255,255,.08),transparent 58%),rgba(0,0,0,.20) !important;
  border:1px solid rgba(255,255,255,.07) !important;
}
#webdesign .webRefCopy{
  position:relative !important;
  z-index:2 !important;
}
#webdesign .webRefCopy h3{
  font-size:clamp(24px,2vw,34px) !important;
}
#webdesign .webRefCopy p{
  font-size:15px !important;
}
#webdesign .webRefControls{
  display:none !important;
}
@media(max-width:1100px){
  #webdesign .webRefStage{grid-template-columns:1fr !important}
  #webdesign .webRefSlide{min-height:auto !important}
}



/* v66 EREN reference text fix */
.webRefCard h3 br, .web-reference-card h3 br, .webdesignRefCard h3 br{display:block}



/* v72 subtle scroll sound control */
.soundToggle{
  position:fixed;
  right:clamp(18px,2vw,28px);
  bottom:clamp(18px,2vw,28px);
  z-index:280;
  width:48px;
  height:48px;
  border-radius:50%;
  border:1px solid rgba(255,184,107,.24);
  background:rgba(5,8,20,.62);
  backdrop-filter:blur(14px);
  color:var(--sun);
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:0 18px 45px rgba(0,0,0,.32),0 0 24px rgba(255,184,107,.08);
  transition:transform .22s ease,border-color .22s ease,background .22s ease,box-shadow .22s ease;
}
.soundToggle:hover{transform:translateY(-2px);border-color:rgba(255,184,107,.42);background:rgba(12,13,24,.78);box-shadow:0 22px 54px rgba(0,0,0,.38),0 0 28px rgba(255,184,107,.14)}
.soundToggle svg{width:20px;height:20px;display:block}
.soundToggle .soundOff{display:block}
.soundToggle .soundOn{display:none}
.soundToggle.is-on .soundOff{display:none}
.soundToggle.is-on .soundOn{display:block}
.soundToggle.is-on{color:#fff8ef;border-color:rgba(255,184,107,.45)}
@media(max-width:760px){.soundToggle{width:44px;height:44px;right:16px;bottom:16px}}



/* v73 click sounds and ambient music */
.soundToggle.is-on:after{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  border:1px solid rgba(255,184,107,.18);
  animation:soundPulse 2.6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes soundPulse{0%,100%{transform:scale(.96);opacity:.28}50%{transform:scale(1.16);opacity:.82}}



/* v74 full page space sound feedback */
.soundToggle.is-on{box-shadow:0 20px 60px rgba(0,0,0,.42),0 0 34px rgba(100,239,255,.14),0 0 26px rgba(255,184,107,.12)}
.menuLinks a{position:relative}
.menuLinks a:after{content:"";position:absolute;left:0;right:auto;bottom:-8px;width:0;height:2px;border-radius:99px;background:linear-gradient(90deg,var(--sun),var(--cyan),transparent);box-shadow:0 0 16px rgba(255,184,107,.34);transition:width .22s ease}
.menuLinks a:hover:after{width:min(220px,42vw)}



/* v75 sound volume control */
.soundControl{
  position:fixed;
  right:clamp(18px,2vw,28px);
  bottom:clamp(18px,2vw,28px);
  z-index:285;
  display:grid;
  justify-items:end;
  gap:10px;
}
.soundControl .soundToggle{position:relative !important;right:auto !important;bottom:auto !important;z-index:2}
.soundVolumePanel{
  position:absolute;
  right:0;
  bottom:58px;
  width:178px;
  padding:12px 14px 14px;
  border-radius:18px;
  border:1px solid rgba(255,184,107,.18);
  background:rgba(5,8,20,.74);
  backdrop-filter:blur(16px);
  box-shadow:0 20px 54px rgba(0,0,0,.36),0 0 24px rgba(100,239,255,.08);
  opacity:0;
  transform:translateY(8px) scale(.96);
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease, border-color .22s ease;
}
.soundControl:hover .soundVolumePanel,
.soundControl:focus-within .soundVolumePanel{
  opacity:1;
  transform:translateY(0) scale(1);
  pointer-events:auto;
  border-color:rgba(255,184,107,.32);
}
.soundVolumePanel span{
  display:block;
  color:var(--sun);
  font-size:11px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:9px;
}
.soundVolumePanel input{
  width:100%;
  accent-color:var(--sun);
  cursor:pointer;
}
.soundVolumePanel input::-webkit-slider-runnable-track{height:4px;border-radius:99px;background:linear-gradient(90deg,var(--sun),var(--cyan))}
.soundVolumePanel input::-webkit-slider-thumb{margin-top:-6px}
@media(max-width:760px){.soundControl{right:16px;bottom:16px}.soundVolumePanel{bottom:54px;width:158px}}



/* v77 universe sound tuning */
.soundToggle.is-cosmic::after{content:"Universe Audio";position:absolute;right:58px;top:50%;transform:translateY(-50%);white-space:nowrap;font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,248,239,.74);opacity:0;pointer-events:none;transition:opacity .2s ease}
.soundToggle.is-cosmic:hover::after{opacity:1}



/* v80 shooting stars and supernova reload */
.shootingStarLayer{position:fixed;inset:0;z-index:120;pointer-events:none;overflow:hidden;mix-blend-mode:screen}
.shootingStar{position:absolute;width:160px;height:2px;border-radius:999px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,248,239,.95),rgba(100,239,255,.78),rgba(127,92,255,0));filter:drop-shadow(0 0 12px rgba(100,239,255,.72));opacity:0;transform:translate3d(var(--sx,110vw),var(--sy,20vh),0) rotate(var(--rot,-18deg));animation:shootingStarFly 1.65s cubic-bezier(.2,.75,.25,1) forwards}
.shootingStar:before{content:"";position:absolute;right:18px;top:50%;width:7px;height:7px;border-radius:50%;background:#fff;transform:translateY(-50%);box-shadow:0 0 18px rgba(255,255,255,.95),0 0 34px rgba(100,239,255,.68)}
@keyframes shootingStarFly{0%{opacity:0;transform:translate3d(var(--sx,110vw),var(--sy,20vh),0) rotate(var(--rot,-18deg)) scaleX(.5)}10%{opacity:1}100%{opacity:0;transform:translate3d(var(--ex,-25vw),var(--ey,45vh),0) rotate(var(--rot,-18deg)) scaleX(1.2)}}
.supernovaReload{position:fixed;right:clamp(18px,2.2vw,30px);bottom:clamp(18px,2.2vw,30px);z-index:310;display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 17px;border-radius:999px;border:1px solid rgba(255,184,107,.22);background:rgba(7,8,16,.62);backdrop-filter:blur(16px);color:#fff8ef;font-weight:900;font-size:12px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;box-shadow:0 18px 52px rgba(0,0,0,.32),0 0 24px rgba(255,184,107,.08);transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease,background .24s ease}
.supernovaReload:hover{transform:translateY(-3px);border-color:rgba(255,184,107,.45);background:rgba(18,12,18,.72);box-shadow:0 24px 70px rgba(0,0,0,.42),0 0 34px rgba(255,184,107,.16)}
.supernovaReload .novaIcon{width:18px;height:18px;border-radius:50%;background:radial-gradient(circle,#fff 0 10%,var(--sun) 22%,var(--orange) 46%,rgba(127,92,255,.78) 72%,transparent 76%);box-shadow:0 0 18px rgba(255,184,107,.6);animation:novaIconPulse 2.4s ease-in-out infinite}
@keyframes novaIconPulse{0%,100%{transform:scale(.92);filter:saturate(1)}50%{transform:scale(1.12);filter:saturate(1.3)}}
.supernovaOverlay{position:fixed;inset:0;z-index:9999;pointer-events:none;display:grid;place-items:center;background:rgba(0,0,0,0);opacity:0;transition:opacity .18s ease}
.supernovaOverlay.is-active{opacity:1;background:radial-gradient(circle at 50% 50%,rgba(255,248,239,.42),rgba(255,184,107,.18) 18%,rgba(127,92,255,.12) 36%,rgba(0,0,0,.76) 74%)}
.supernovaBlast{position:relative;width:32vmin;height:32vmin;border-radius:50%;background:radial-gradient(circle,#fff 0 6%,#fff3cf 10%,var(--sun) 20%,var(--orange) 36%,rgba(127,92,255,.58) 55%,transparent 72%);filter:blur(.2px);box-shadow:0 0 80px rgba(255,184,107,.8),0 0 160px rgba(127,92,255,.4);transform:scale(.05);opacity:0}
.supernovaOverlay.is-active .supernovaBlast{animation:supernovaReloadBlast 1.2s cubic-bezier(.15,.85,.18,1) forwards}
.supernovaBlast:before,.supernovaBlast:after{content:"";position:absolute;inset:-28%;border-radius:50%;border:1px solid rgba(255,255,255,.48);animation:novaReloadRing 1.2s ease-out forwards;opacity:0}.supernovaBlast:after{inset:-60%;border-color:rgba(100,239,255,.25);animation-delay:.14s}
@keyframes supernovaReloadBlast{0%{opacity:0;transform:scale(.05)}18%{opacity:1;transform:scale(.45)}72%{opacity:1;transform:scale(2.9)}100%{opacity:0;transform:scale(5.2)}}
@keyframes novaReloadRing{0%{opacity:.88;transform:scale(.2)}100%{opacity:0;transform:scale(2.2)}}
@media(max-width:760px){.supernovaReload{right:14px;bottom:14px;height:42px;padding:0 13px;font-size:10px}.supernovaReload span:last-child{display:none}.shootingStar{width:120px}}



/* v81 meteor impact instead of supernova */
.supernovaReload,.supernovaOverlay{display:none !important}
.meteorButton{position:fixed;right:clamp(18px,2.2vw,30px);bottom:clamp(18px,2.2vw,30px);z-index:310;display:inline-flex;align-items:center;gap:10px;height:46px;padding:0 17px;border-radius:999px;border:1px solid rgba(255,184,107,.24);background:rgba(7,8,16,.64);backdrop-filter:blur(16px);color:#fff8ef;font-weight:900;font-size:12px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;box-shadow:0 18px 52px rgba(0,0,0,.32),0 0 24px rgba(255,184,107,.08);transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease,background .24s ease}
.meteorButton:hover{transform:translateY(-3px);border-color:rgba(255,184,107,.52);background:rgba(18,12,18,.72);box-shadow:0 24px 70px rgba(0,0,0,.42),0 0 34px rgba(255,184,107,.16)}
.meteorButton .meteorIcon{position:relative;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff7dc 0 8%,var(--sun) 18%,var(--orange) 42%,#7f3f28 72%,#231015 100%);box-shadow:0 0 18px rgba(255,184,107,.55);animation:meteorIconPulse 2.6s ease-in-out infinite}
.meteorButton .meteorIcon:before{content:"";position:absolute;right:13px;top:10px;width:26px;height:3px;border-radius:99px;background:linear-gradient(90deg,rgba(100,239,255,0),rgba(100,239,255,.65),rgba(255,184,107,.95));filter:blur(.3px);transform:rotate(35deg);transform-origin:right center;opacity:.8}
@keyframes meteorIconPulse{0%,100%{transform:scale(.94)}50%{transform:scale(1.1)}}
.meteorLayer{position:fixed;inset:0;z-index:9998;pointer-events:none;overflow:hidden;mix-blend-mode:screen}
.impactMeteor{position:absolute;left:-18vw;top:-18vh;width:260px;height:8px;border-radius:999px;background:linear-gradient(90deg,rgba(100,239,255,0),rgba(100,239,255,.35),rgba(255,184,107,.92),#fff);filter:drop-shadow(0 0 16px rgba(255,184,107,.78)) drop-shadow(0 0 34px rgba(100,239,255,.32));transform:rotate(32deg);opacity:0;animation:meteorImpactFly 1.15s cubic-bezier(.14,.84,.18,1) forwards}
.impactMeteor:after{content:"";position:absolute;right:-10px;top:50%;width:34px;height:34px;border-radius:50%;transform:translateY(-50%);background:radial-gradient(circle at 35% 30%,#fff 0 10%,#fff0c8 18%,var(--sun) 34%,var(--orange) 56%,rgba(127,92,255,.42) 78%,transparent 80%);box-shadow:0 0 30px rgba(255,184,107,.86),0 0 62px rgba(127,92,255,.36)}
.impactFlash{position:fixed;right:8vw;bottom:10vh;width:28vmin;height:28vmin;border-radius:50%;background:radial-gradient(circle,#fff 0 5%,rgba(255,184,107,.8) 13%,rgba(231,119,58,.42) 30%,rgba(127,92,255,.18) 52%,transparent 72%);filter:blur(.5px);opacity:0;transform:scale(.05);animation:impactFlash .9s ease-out forwards}
@keyframes meteorImpactFly{0%{opacity:0;transform:translate3d(0,0,0) rotate(32deg) scaleX(.55)}8%{opacity:1}86%{opacity:1}100%{opacity:0;transform:translate3d(126vw,104vh,0) rotate(32deg) scaleX(1.05)}}
@keyframes impactFlash{0%{opacity:0;transform:scale(.05)}22%{opacity:1;transform:scale(.38)}100%{opacity:0;transform:scale(2.2)}}
body.meteorShake{animation:meteorPageShake .72s cubic-bezier(.36,.07,.19,.97) both}
@keyframes meteorPageShake{10%,90%{transform:translate3d(-1px,0,0)}20%,80%{transform:translate3d(2px,1px,0)}30%,50%,70%{transform:translate3d(-4px,-1px,0)}40%,60%{transform:translate3d(4px,1px,0)}}
@media(max-width:760px){.meteorButton{right:14px;bottom:14px;height:42px;padding:0 13px;font-size:10px}.meteorButton span:last-child{display:none}.impactMeteor{width:190px}.impactMeteor:after{width:26px;height:26px}}



/* v82 bigger slower meteor with synced impact */
.supernovaReload,.supernovaOverlay{display:none !important}
.meteorButton{position:fixed;right:clamp(18px,2.2vw,30px);bottom:clamp(18px,2.2vw,30px);z-index:310;display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,184,107,.26);background:rgba(7,8,16,.68);backdrop-filter:blur(16px);color:#fff8ef;font-weight:900;font-size:12px;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;box-shadow:0 18px 52px rgba(0,0,0,.34),0 0 26px rgba(255,184,107,.10);transition:transform .24s ease,border-color .24s ease,box-shadow .24s ease,background .24s ease}
.meteorButton:hover{transform:translateY(-3px);border-color:rgba(255,184,107,.55);background:rgba(18,12,18,.75);box-shadow:0 24px 70px rgba(0,0,0,.42),0 0 36px rgba(255,184,107,.18)}
.meteorButton .meteorIcon{position:relative;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff7dc 0 8%,var(--sun) 18%,var(--orange) 42%,#7f3f28 72%,#231015 100%);box-shadow:0 0 20px rgba(255,184,107,.58);animation:meteorIconPulse 2.6s ease-in-out infinite}
.meteorButton .meteorIcon:before{content:"";position:absolute;right:13px;top:10px;width:30px;height:4px;border-radius:99px;background:linear-gradient(90deg,rgba(100,239,255,0),rgba(100,239,255,.65),rgba(255,184,107,.95));filter:blur(.4px);transform:rotate(35deg);transform-origin:right center;opacity:.88}
.meteorLayer{position:fixed;inset:0;z-index:9998;pointer-events:none;overflow:hidden;mix-blend-mode:screen}
.impactMeteor{position:absolute;left:-30vw;top:-24vh;width:520px;height:18px;border-radius:999px;background:linear-gradient(90deg,rgba(100,239,255,0),rgba(100,239,255,.30),rgba(255,184,107,.92),#fff);filter:drop-shadow(0 0 22px rgba(255,184,107,.88)) drop-shadow(0 0 48px rgba(100,239,255,.36));transform:rotate(34deg);opacity:0;animation:meteorImpactFlyV82 1.95s cubic-bezier(.18,.72,.14,1) forwards}
.impactMeteor:before{content:"";position:absolute;right:18px;top:50%;width:110px;height:34px;border-radius:999px;transform:translateY(-50%);background:linear-gradient(90deg,rgba(255,184,107,0),rgba(255,184,107,.6),rgba(255,255,255,.95));filter:blur(8px)}
.impactMeteor:after{content:"";position:absolute;right:-18px;top:50%;width:72px;height:72px;border-radius:50%;transform:translateY(-50%);background:radial-gradient(circle at 35% 35%,#fff 0 8%,var(--sun) 18%,var(--orange) 44%,#6b2e22 70%,transparent 76%);box-shadow:0 0 42px rgba(255,184,107,.9),0 0 90px rgba(127,92,255,.42)}
.impactFlash{position:fixed;right:6vw;bottom:8vh;width:42vmin;height:42vmin;border-radius:50%;background:radial-gradient(circle,#fff 0 5%,rgba(255,184,107,.86) 12%,rgba(231,119,58,.48) 28%,rgba(127,92,255,.20) 54%,transparent 72%);filter:blur(.7px);opacity:0;transform:scale(.05);animation:impactFlashV82 1.05s ease-out forwards}
.impactShockwave{position:fixed;right:8vw;bottom:10vh;width:18vmin;height:18vmin;border-radius:50%;border:2px solid rgba(255,248,239,.52);box-shadow:0 0 36px rgba(255,184,107,.35);opacity:0;animation:impactShockwaveV82 1.1s ease-out forwards}
@keyframes meteorImpactFlyV82{0%{opacity:0;transform:translate3d(0,0,0) rotate(34deg) scaleX(.46)}7%{opacity:1}84%{opacity:1}100%{opacity:0;transform:translate3d(142vw,112vh,0) rotate(34deg) scaleX(1.06)}}
@keyframes impactFlashV82{0%{opacity:0;transform:scale(.05)}16%{opacity:1;transform:scale(.34)}100%{opacity:0;transform:scale(2.4)}}
@keyframes impactShockwaveV82{0%{opacity:.85;transform:scale(.2)}100%{opacity:0;transform:scale(4.3)}}
body.meteorShake{animation:meteorPageShakeV82 .82s cubic-bezier(.36,.07,.19,.97) both}
@keyframes meteorPageShakeV82{10%,90%{transform:translate3d(-2px,1px,0)}20%,80%{transform:translate3d(3px,-1px,0)}30%,50%,70%{transform:translate3d(-6px,-2px,0)}40%,60%{transform:translate3d(6px,2px,0)}}
@media(max-width:760px){.meteorButton{right:14px;bottom:14px;height:42px;padding:0 13px;font-size:10px}.meteorButton span:last-child{display:none}.impactMeteor{width:340px;height:14px}.impactMeteor:after{width:52px;height:52px}}



/* v83 meteor icon in header */
.headerActions{display:flex !important;align-items:center !important;gap:10px !important}
.headerActions .meteorButton{
  position:relative !important;
  right:auto !important;
  bottom:auto !important;
  z-index:2 !important;
  width:48px !important;
  height:48px !important;
  min-width:48px !important;
  padding:0 !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  gap:0 !important;
}
.headerActions .meteorButton span:not(.meteorIcon){display:none !important}
.headerActions .meteorButton .meteorIcon{width:22px !important;height:22px !important}
.headerActions .meteorButton .meteorIcon:before{width:27px !important;height:3px !important;right:12px !important;top:9px !important}
@media(max-width:760px){.headerActions{gap:8px !important}.headerActions .meteorButton{width:44px !important;height:44px !important;min-width:44px !important}.headerActions .meteorButton .meteorIcon{width:20px !important;height:20px !important}}



/* v84 prettier slower shooting stars */
.cosmicMeteorShower{position:fixed;inset:0;z-index:38;pointer-events:none;overflow:hidden;mix-blend-mode:screen}
.cosmicShootingStar{position:absolute;left:var(--sx,-12vw);top:var(--sy,12vh);width:var(--len,240px);height:2px;border-radius:999px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(100,239,255,.25) 22%,rgba(255,255,255,.95) 62%,rgba(255,184,107,.92) 100%);filter:drop-shadow(0 0 8px rgba(100,239,255,.55)) drop-shadow(0 0 16px rgba(255,184,107,.25));opacity:0;transform:translate3d(0,0,0) rotate(var(--rot,24deg));animation:cosmicStarFlight var(--dur,4.8s) cubic-bezier(.18,.62,.3,1) forwards}
.cosmicShootingStar:before{content:"";position:absolute;right:-5px;top:50%;width:10px;height:10px;border-radius:50%;transform:translateY(-50%);background:radial-gradient(circle,#fff 0 16%,#64efff 34%,#ffb86b 58%,transparent 76%);box-shadow:0 0 18px rgba(255,255,255,.62),0 0 34px rgba(100,239,255,.38)}
.cosmicShootingStar:after{content:"";position:absolute;right:8px;top:50%;width:55%;height:12px;border-radius:999px;transform:translateY(-50%);background:radial-gradient(ellipse at right,rgba(255,184,107,.20),rgba(100,239,255,.10) 44%,transparent 72%);filter:blur(6px)}
@keyframes cosmicStarFlight{0%{opacity:0;transform:translate3d(0,0,0) rotate(var(--rot,24deg)) scaleX(.35)}10%{opacity:1}72%{opacity:1}100%{opacity:0;transform:translate3d(var(--tx,118vw),var(--ty,48vh),0) rotate(var(--rot,24deg)) scaleX(1)}}



/* v86 cosmic galaxy phenomena instead of shooting stars */
.shootingStarLayer,
.cosmicMeteorShower{
  display:none !important;
  opacity:0 !important;
  visibility:hidden !important;
}
.galaxyPhenomenaLayer{
  position:fixed;
  inset:0;
  z-index:121;
  pointer-events:none;
  overflow:hidden;
  mix-blend-mode:screen;
}
.galaxyRift{
  position:absolute;
  left:var(--x,50vw);
  top:var(--y,34vh);
  width:var(--size,340px);
  height:var(--size,340px);
  transform:translate(-50%,-50%) scale(.18) rotate(var(--rot,0deg));
  opacity:0;
  border-radius:50%;
  animation:galaxyRiftLife 8.4s cubic-bezier(.18,.72,.2,1) forwards;
  filter:drop-shadow(0 0 42px rgba(127,92,255,.34));
}
.galaxyRift::before{
  content:"";
  position:absolute;
  inset:7%;
  border-radius:50%;
  background:
    radial-gradient(circle at 50% 50%,rgba(255,255,255,.9) 0 2%,rgba(255,184,107,.65) 3%,rgba(127,92,255,.40) 10%,rgba(100,239,255,.18) 22%,transparent 52%),
    conic-gradient(from 0deg,transparent,rgba(100,239,255,.55),rgba(127,92,255,.72),rgba(255,184,107,.55),rgba(100,239,255,.42),transparent);
  filter:blur(.2px);
  animation:galaxySpin 8.4s linear forwards;
  box-shadow:0 0 70px rgba(127,92,255,.28),0 0 110px rgba(100,239,255,.12);
}
.galaxyRift::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    repeating-conic-gradient(from 20deg,rgba(255,255,255,.0) 0 9deg,rgba(255,255,255,.18) 10deg 11deg,rgba(255,255,255,0) 14deg 24deg),
    radial-gradient(circle,transparent 37%,rgba(100,239,255,.24) 38%,rgba(127,92,255,.16) 48%,transparent 66%);
  animation:galaxyRing 8.4s ease-out forwards;
}
.galaxyDust{
  position:absolute;
  left:50%;
  top:50%;
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--c,#fff8ef);
  box-shadow:0 0 18px var(--c,#fff8ef);
  transform:translate(-50%,-50%) rotate(var(--a,0deg)) translateX(var(--r,130px)) scale(.3);
  opacity:0;
  animation:galaxyDustLife 7.8s ease-out forwards;
  animation-delay:var(--d,0s);
}
.galaxyWave{
  position:absolute;
  left:var(--x,50vw);
  top:var(--y,34vh);
  width:var(--size,340px);
  height:var(--size,340px);
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.12);
  border:1px solid rgba(100,239,255,.28);
  box-shadow:0 0 70px rgba(127,92,255,.16), inset 0 0 34px rgba(255,184,107,.08);
  opacity:0;
  animation:galaxyWaveLife 8.4s ease-out forwards;
}
@keyframes galaxyRiftLife{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.12) rotate(var(--rot,0deg));filter:blur(10px) drop-shadow(0 0 10px rgba(127,92,255,.2))}
  18%{opacity:.95;transform:translate(-50%,-50%) scale(.78) rotate(calc(var(--rot,0deg) + 6deg));filter:blur(0) drop-shadow(0 0 42px rgba(127,92,255,.34))}
  62%{opacity:.92;transform:translate(-50%,-50%) scale(1.02) rotate(calc(var(--rot,0deg) + 18deg))}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.34) rotate(calc(var(--rot,0deg) + 34deg));filter:blur(8px) drop-shadow(0 0 22px rgba(100,239,255,.16))}
}
@keyframes galaxySpin{from{transform:rotate(0deg) scale(.9)}to{transform:rotate(280deg) scale(1.08)}}
@keyframes galaxyRing{
  0%{opacity:0;transform:scale(.4) rotate(0deg)}
  22%{opacity:.75;transform:scale(.82) rotate(24deg)}
  72%{opacity:.42;transform:scale(1.16) rotate(110deg)}
  100%{opacity:0;transform:scale(1.55) rotate(180deg)}
}
@keyframes galaxyDustLife{
  0%{opacity:0;transform:translate(-50%,-50%) rotate(var(--a,0deg)) translateX(calc(var(--r,130px) * .2)) scale(.25)}
  18%{opacity:1}
  72%{opacity:.9}
  100%{opacity:0;transform:translate(-50%,-50%) rotate(calc(var(--a,0deg) + 110deg)) translateX(calc(var(--r,130px) * 1.28)) scale(1.15)}
}
@keyframes galaxyWaveLife{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.08)}
  18%{opacity:.54;transform:translate(-50%,-50%) scale(.65)}
  70%{opacity:.22;transform:translate(-50%,-50%) scale(1.45)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(2.1)}
}
@media(max-width:760px){
  .galaxyRift,.galaxyWave{width:var(--size,240px);height:var(--size,240px)}
}



/* v87 replace galaxy phenomena with floating space dust */
.galaxyPhenomenaLayer,.galaxyRift,.galaxyWave,.galaxyDust{display:none !important;opacity:0 !important;visibility:hidden !important}
.spaceDustLayer{position:fixed;inset:0;z-index:121;pointer-events:none;overflow:hidden;mix-blend-mode:screen}
.spaceDust{position:absolute;left:var(--x,50vw);top:var(--y,50vh);width:var(--s,5px);height:var(--s,5px);border-radius:50%;opacity:0;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.96) 0 14%, var(--c,rgba(255,248,239,.9)) 36%, rgba(255,248,239,0) 72%);box-shadow:0 0 calc(var(--s,5px) * 2.8) var(--g,rgba(255,248,239,.18));filter:blur(var(--b,0px));transform:translate3d(0,0,0) scale(var(--sc,.75));animation:spaceDustFloat var(--dur,20s) ease-in-out var(--delay,0s) infinite alternate;will-change:transform,opacity}
.spaceDust.is-near{mix-blend-mode:screen;opacity:.95}
.spaceDust.is-far{opacity:.55}
.spaceDustNebula{position:absolute;inset:auto;left:var(--x,50vw);top:var(--y,50vh);width:var(--w,180px);height:var(--h,120px);border-radius:50%;pointer-events:none;opacity:.14;filter:blur(24px);background:radial-gradient(circle at 50% 50%, var(--c1,rgba(100,239,255,.18)) 0%, var(--c2,rgba(127,92,255,.14)) 34%, rgba(255,184,107,.08) 62%, rgba(0,0,0,0) 78%);transform:translate(-50%,-50%);animation:spaceNebulaDrift var(--dur,28s) ease-in-out var(--delay,0s) infinite alternate}
@keyframes spaceDustFloat{
  0%{opacity:.12;transform:translate3d(0,0,0) scale(var(--sc,.75))}
  20%{opacity:var(--op,.45)}
  50%{transform:translate3d(var(--mx,18px),var(--my,-24px),0) scale(calc(var(--sc,.75) + .12))}
  100%{opacity:calc(var(--op,.45) * .72);transform:translate3d(var(--tx,-36px),var(--ty,28px),0) scale(calc(var(--sc,.75) + .22))}
}
@keyframes spaceNebulaDrift{
  0%{opacity:.08;transform:translate(-50%,-50%) scale(.92)}
  50%{opacity:.16;transform:translate(calc(-50% + 10px),calc(-50% - 8px)) scale(1.02)}
  100%{opacity:.1;transform:translate(calc(-50% - 14px),calc(-50% + 12px)) scale(1.08)}
}



/* v88 limit floating space dust to before Webdesign */
.spaceDustLayer{
  transition:opacity .45s ease, visibility .45s ease !important;
}
.spaceDustLayer.is-hidden{
  opacity:0 !important;
  visibility:hidden !important;
}



/* v90 H1 Big Bang intro after preloader */
body.heroBangPending .heroCopy .eyebrow,
body.heroBangPending .heroCopy .heroLead,
body.heroBangPending .heroCopy .heroActions,
body.heroBangPending .scrollHint,
body.heroBangPending .heroBackdrop,
body.heroBangPending .spaceDustLayer{
  opacity:0 !important;
}
body.heroBangPending .heroCopy h1{
  opacity:0;
  transform:scale(.16) translateY(18px);
  filter:blur(26px) brightness(2.2);
}
body.heroBangPending .heroCopy{isolation:isolate}
body.heroBangPending .heroCopy:before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:24vmin;
  height:24vmin;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.04);
  opacity:0;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(circle,#fff 0 4%,rgba(255,248,239,.94) 8%,rgba(255,184,107,.72) 18%,rgba(231,119,58,.42) 34%,rgba(127,92,255,.28) 54%,rgba(100,239,255,.14) 68%,transparent 76%);
  box-shadow:0 0 80px rgba(255,184,107,.38),0 0 140px rgba(127,92,255,.22),0 0 220px rgba(100,239,255,.12);
}
body.heroBigBang .heroCopy:before{animation:heroBangCore 1.55s cubic-bezier(.16,.84,.21,1) both}
body.heroBigBang .heroCopy h1{animation:heroBangTitle 1.35s cubic-bezier(.15,.88,.18,1) .18s both}
body.heroBigBang .heroCopy .eyebrow{animation:heroBangReveal .75s ease .95s both}
body.heroBigBang .heroCopy .heroLead{animation:heroBangReveal .85s ease 1.14s both}
body.heroBigBang .heroCopy .heroActions{animation:heroBangReveal .85s ease 1.32s both}
body.heroBigBang .scrollHint{animation:heroBangReveal .8s ease 1.55s both}
body.heroBigBang .heroBackdrop{animation:heroBackdropBang 1.2s ease .82s both}
body.heroBigBang .spaceDustLayer{animation:heroBangReveal 1s ease 1.1s both}
.heroBangParticles{position:fixed;inset:0;z-index:122;pointer-events:none;overflow:hidden;mix-blend-mode:screen}
.heroBangParticle{position:absolute;left:50vw;top:50vh;width:var(--s,5px);height:var(--s,5px);border-radius:50%;background:var(--c,#fff8ef);box-shadow:0 0 18px var(--c,#fff8ef);opacity:0;animation:heroBangParticle 1.35s cubic-bezier(.16,.82,.18,1) var(--d,0s) both}
@keyframes heroBangCore{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.04);filter:blur(14px) brightness(2.4)}
  18%{opacity:1;transform:translate(-50%,-50%) scale(.35);filter:blur(2px) brightness(2.8)}
  52%{opacity:.82;transform:translate(-50%,-50%) scale(1.55);filter:blur(4px) brightness(1.6)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(4.2);filter:blur(22px) brightness(.9)}
}
@keyframes heroBangTitle{
  0%{opacity:0;transform:scale(.16) translateY(22px);filter:blur(28px) brightness(2.6);letter-spacing:-.18em;text-shadow:0 0 90px rgba(255,248,239,.9),0 0 160px rgba(255,184,107,.5)}
  36%{opacity:1;transform:scale(1.13) translateY(0);filter:blur(1px) brightness(1.5);letter-spacing:-.09em;text-shadow:0 0 70px rgba(255,184,107,.58),0 0 130px rgba(127,92,255,.32)}
  70%{transform:scale(.985);filter:blur(0) brightness(1.08)}
  100%{opacity:1;transform:scale(1);filter:blur(0) brightness(1);letter-spacing:-.07em}
}
@keyframes heroBangReveal{
  0%{opacity:0;transform:translateY(22px);filter:blur(10px)}
  100%{opacity:1;transform:translateY(0);filter:blur(0)}
}
@keyframes heroBackdropBang{
  0%{opacity:0;filter:blur(18px) saturate(1.7);transform:translateY(7vh) scale(.96)}
  100%{opacity:calc(.18 + var(--hero-p)*.28);filter:saturate(1.15) contrast(1.08);transform:translateY(calc(var(--hero-p)*-9vh)) scale(calc(1 + var(--hero-p)*.03))}
}
@keyframes heroBangParticle{
  0%{opacity:0;transform:translate3d(0,0,0) scale(.2)}
  16%{opacity:1}
  100%{opacity:0;transform:translate3d(var(--tx,120px),var(--ty,-80px),0) scale(1.3)}
}



/* v91 preloader removed */
.preloader{display:none !important;opacity:0 !important;visibility:hidden !important;pointer-events:none !important}
body.heroBangPending .heroCopy:before{opacity:1}



/* v96 webdesign referenzen: premium futuristic, clean */
#webdesign .webRefCarousel{
  margin-top:clamp(30px,4.2vh,54px) !important;
  width:100% !important;
  max-width:none !important;
  position:relative !important;
  z-index:6 !important;
}
#webdesign .webRefStage{
  position:relative !important;
  min-height:320px !important;
  border-radius:34px !important;
  overflow:hidden !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.022)),
    radial-gradient(circle at 18% 18%,rgba(100,239,255,.105),transparent 33%),
    radial-gradient(circle at 88% 24%,rgba(127,92,255,.11),transparent 28%),
    rgba(5,8,18,.74) !important;
  border:1px solid rgba(255,255,255,.105) !important;
  box-shadow:
    0 34px 95px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.11),
    inset 0 -1px 0 rgba(255,255,255,.035),
    0 0 38px rgba(100,239,255,.045) !important;
  backdrop-filter:blur(18px) saturate(1.08) !important;
}
#webdesign .webRefStage::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(115deg,transparent 0 42%,rgba(255,255,255,.06) 50%,transparent 58% 100%),
    linear-gradient(90deg,rgba(100,239,255,.16),transparent 16%,transparent 84%,rgba(255,184,107,.10));
  opacity:.34;
  pointer-events:none;
}
#webdesign .webRefStage::after{
  content:"";
  position:absolute;
  left:26px;right:26px;bottom:24px;height:1px;
  background:linear-gradient(90deg,transparent,rgba(100,239,255,.55),rgba(127,92,255,.42),rgba(255,184,107,.45),transparent);
  opacity:.65;
  pointer-events:none;
}
#webdesign .webRefSlide{
  padding:clamp(24px,3vw,38px) !important;
  grid-template-columns:minmax(230px,330px) minmax(0,1fr) !important;
  gap:clamp(24px,3.8vw,54px) !important;
  align-items:center !important;
  opacity:0;
  transform:translateY(12px) scale(.99) !important;
  transition:opacity .42s ease,transform .42s ease !important;
}
#webdesign .webRefSlide.is-active{
  opacity:1 !important;
  transform:translateY(0) scale(1) !important;
}
#webdesign .webRefLogoBox{
  position:relative !important;
  min-height:210px !important;
  border-radius:28px !important;
  background:
    radial-gradient(circle at 50% 44%,rgba(255,255,255,.105),transparent 56%),
    linear-gradient(180deg,rgba(255,255,255,.052),rgba(255,255,255,.018)),
    rgba(0,0,0,.22) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.075),0 22px 58px rgba(0,0,0,.28) !important;
  overflow:hidden !important;
}
#webdesign .webRefLogoBox::before{
  content:"";
  position:absolute;
  inset:16px;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.052);
  background:
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(0deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:34px 34px;
  opacity:.33;
  mask-image:radial-gradient(circle,black 0 46%,transparent 72%);
  pointer-events:none;
}
#webdesign .webRefLogoBox::after{
  content:"";
  position:absolute;
  width:140px;height:140px;border-radius:50%;
  left:50%;top:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(100,239,255,.12),rgba(127,92,255,.08) 48%,transparent 72%);
  filter:blur(10px);
  opacity:.8;
  pointer-events:none;
}
#webdesign .webRefLogoBox img{
  position:relative !important;
  z-index:2 !important;
  max-width:82% !important;
  max-height:116px !important;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.44)) drop-shadow(0 0 18px rgba(255,255,255,.06)) !important;
  transform:translateZ(0) !important;
}
#webdesign .webRefLogoBox.n2 img{max-height:132px !important;max-width:88% !important}
#webdesign .webRefCopy{
  position:relative !important;
  z-index:2 !important;
  max-width:620px !important;
}
#webdesign .webRefCopy span{
  display:inline-flex !important;
  width:auto !important;
  padding:8px 11px !important;
  border-radius:999px !important;
  margin-bottom:14px !important;
  color:rgba(255,248,239,.82) !important;
  background:rgba(255,255,255,.055) !important;
  border:1px solid rgba(255,255,255,.075) !important;
  letter-spacing:.13em !important;
}
#webdesign .webRefCopy h3{
  font-size:clamp(30px,3.25vw,54px) !important;
  line-height:.88 !important;
  letter-spacing:-.055em !important;
  margin:0 0 14px !important;
  color:#fff8ef !important;
  text-transform:uppercase !important;
}
#webdesign .webRefCopy p{
  max-width:56ch !important;
  font-size:clamp(15px,1.05vw,17px) !important;
  line-height:1.72 !important;
  color:rgba(255,248,239,.72) !important;
}
#webdesign .webRefCopy a{
  display:inline-flex !important;
  align-items:center !important;
  gap:11px !important;
  margin-top:20px !important;
  padding:14px 18px !important;
  border-radius:999px !important;
  color:#130704 !important;
  background:linear-gradient(135deg,var(--orange),var(--sun)) !important;
  border:0 !important;
  box-shadow:0 18px 44px rgba(231,119,58,.24) !important;
  transition:transform .22s ease,box-shadow .22s ease,filter .22s ease !important;
}
#webdesign .webRefCopy a::after{content:"↗";font-size:13px;line-height:1}
#webdesign .webRefCopy a:hover{transform:translateY(-3px) !important;box-shadow:0 24px 58px rgba(231,119,58,.34) !important;filter:saturate(1.08)}
#webdesign .webRefControls{
  display:flex !important;
  justify-content:flex-start !important;
  gap:10px !important;
  margin-top:18px !important;
}
#webdesign .webRefControls button{
  height:6px !important;
  width:30px !important;
  border:0 !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.14) !important;
  padding:0 !important;
  opacity:1 !important;
  transition:width .22s ease,background .22s ease,box-shadow .22s ease !important;
}
#webdesign .webRefControls button.is-active{
  width:68px !important;
  background:linear-gradient(90deg,var(--cyan),var(--violet),var(--sun)) !important;
  box-shadow:0 0 18px rgba(100,239,255,.18) !important;
}
#webdesign .webRefSlide:hover .webRefLogoBox img{transform:translateY(-3px) scale(1.025) !important;transition:transform .28s ease !important}
@media(max-width:900px){
  #webdesign .webRefStage{min-height:520px !important}
  #webdesign .webRefSlide{grid-template-columns:1fr !important;align-content:center !important;gap:22px !important}
  #webdesign .webRefLogoBox{min-height:160px !important}
  #webdesign .webRefCopy h3{font-size:clamp(30px,9vw,44px) !important}
}



/* v97 komplett neu: Webdesign Referenzen als Digital Orbit */
#webdesign .webRefCarousel,
#webdesign .webRefStage,
#webdesign .webRefSlide,
#webdesign .webRefControls{display:none !important;}
#webdesign .webUniverseRefs{
  grid-column:1 / -1;
  width:100%;
  margin-top:clamp(34px,5vh,62px);
  position:relative;
  z-index:8;
}
#webdesign .webUniverseHeader{
  width:min(1180px,100%);
  margin:0 auto clamp(18px,3vh,28px);
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  color:rgba(255,248,239,.72);
}
#webdesign .webUniverseHeader span{
  display:inline-flex;
  padding:9px 13px;
  border-radius:999px;
  border:1px solid rgba(100,239,255,.15);
  background:rgba(100,239,255,.055);
  color:#dffcff;
  font-size:11px;
  font-weight:950;
  letter-spacing:.16em;
  text-transform:uppercase;
}
#webdesign .webUniverseHeader strong{
  max-width:520px;
  text-align:right;
  font-size:clamp(18px,1.5vw,24px);
  line-height:1.15;
  letter-spacing:-.03em;
  color:rgba(255,248,239,.88);
}
#webdesign .webUniverseStage{
  position:relative;
  min-height:clamp(560px,62vw,720px);
  border-radius:42px;
  overflow:hidden;
  background:
    radial-gradient(circle at 48% 42%,rgba(255,184,107,.13),transparent 13%),
    radial-gradient(circle at 50% 48%,rgba(127,92,255,.17),transparent 34%),
    radial-gradient(circle at 14% 22%,rgba(100,239,255,.12),transparent 28%),
    linear-gradient(180deg,rgba(8,11,24,.70),rgba(4,5,10,.90));
  border:1px solid rgba(255,255,255,.085);
  box-shadow:0 35px 100px rgba(0,0,0,.36), inset 0 0 0 1px rgba(255,255,255,.025);
  isolation:isolate;
}
#webdesign .webUniverseStage:before{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 18% 20%,rgba(255,255,255,.38) 0 1px,transparent 1.4px),
    radial-gradient(circle at 80% 64%,rgba(255,255,255,.30) 0 1px,transparent 1.5px),
    radial-gradient(circle at 42% 78%,rgba(100,239,255,.30) 0 1px,transparent 1.5px);
  background-size:91px 91px,137px 137px,173px 173px;
  opacity:.23;
  pointer-events:none;
}
#webdesign .webUniverseStage:after{
  content:"";
  position:absolute;inset:-1px;
  background:linear-gradient(115deg,transparent 0 32%,rgba(100,239,255,.11) 47%,rgba(255,184,107,.10) 55%,transparent 70%);
  transform:translateX(-40%);
  animation:webOrbitLight 9s ease-in-out infinite alternate;
  pointer-events:none;
  opacity:.55;
}
@keyframes webOrbitLight{to{transform:translateX(42%)}}
#webdesign .webOrbitMap{position:absolute;inset:0;pointer-events:none;z-index:1;}
#webdesign .orbitRing{position:absolute;left:50%;top:50%;border-radius:50%;transform:translate(-50%,-50%) rotate(-12deg);border:1px solid rgba(255,255,255,.075);box-shadow:0 0 35px rgba(100,239,255,.045) inset;}
#webdesign .orbitRingOne{width:min(72vw,720px);height:min(72vw,720px);}
#webdesign .orbitRingTwo{width:min(56vw,560px);height:min(56vw,560px);border-color:rgba(127,92,255,.12);animation:orbitSlow 26s linear infinite;}
#webdesign .orbitRingThree{width:min(40vw,400px);height:min(40vw,400px);border-color:rgba(255,184,107,.13);animation:orbitSlow 18s linear infinite reverse;}
#webdesign .orbitRing:after{content:"";position:absolute;left:50%;top:-4px;width:8px;height:8px;border-radius:50%;background:#fff8ef;box-shadow:0 0 22px rgba(255,184,107,.6),0 0 38px rgba(100,239,255,.28)}
@keyframes orbitSlow{to{transform:translate(-50%,-50%) rotate(348deg)}}
#webdesign .orbitCore{position:absolute;left:50%;top:50%;width:clamp(120px,15vw,170px);height:clamp(120px,15vw,170px);border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle,#fff8ef 0 4%,rgba(255,184,107,.58) 10%,rgba(231,119,58,.25) 24%,rgba(127,92,255,.18) 44%,rgba(100,239,255,.07) 62%,transparent 72%);filter:blur(.2px);box-shadow:0 0 70px rgba(255,184,107,.18),0 0 110px rgba(127,92,255,.15);animation:coreBreath 5s ease-in-out infinite;}
#webdesign .orbitCore:after{content:"Loglight";position:absolute;inset:0;display:grid;place-items:center;color:rgba(255,248,239,.76);font-weight:950;font-size:12px;letter-spacing:.16em;text-transform:uppercase;text-shadow:0 0 18px rgba(255,184,107,.28)}
@keyframes coreBreath{50%{transform:translate(-50%,-50%) scale(1.07);filter:brightness(1.12)}}
#webdesign .webUniverseList{position:absolute;inset:0;z-index:4;}
#webdesign .webPlanetCard{position:absolute;width:min(410px,34vw);min-width:300px;}
#webdesign .webPlanetCard.orbit-a{left:clamp(22px,5vw,74px);top:clamp(48px,9vw,96px);}
#webdesign .webPlanetCard.orbit-b{right:clamp(22px,5vw,74px);top:clamp(154px,18vw,220px);}
#webdesign .webPlanetCard.orbit-c{left:50%;bottom:clamp(34px,5vw,70px);transform:translateX(-50%);}
#webdesign .webPlanetLink{position:relative;min-height:238px;padding:20px;display:grid;grid-template-columns:112px 1fr;gap:18px;align-items:center;text-decoration:none;color:#fff8ef;border-radius:30px;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.028));border:1px solid rgba(255,255,255,.095);box-shadow:0 24px 68px rgba(0,0,0,.30),inset 0 0 0 1px rgba(255,255,255,.025);backdrop-filter:blur(18px);overflow:hidden;transition:transform .35s ease,border-color .35s ease,box-shadow .35s ease,background .35s ease;}
#webdesign .webPlanetLink:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at var(--px,50%) var(--py,50%),rgba(100,239,255,.18),transparent 34%),linear-gradient(135deg,rgba(255,184,107,.10),transparent 32%,rgba(127,92,255,.10));opacity:.72;transition:opacity .35s ease;}
#webdesign .webPlanetLink:after{content:"";position:absolute;inset:auto 20px 18px;height:1px;background:linear-gradient(90deg,rgba(100,239,255,.75),rgba(127,92,255,.56),rgba(255,184,107,.55),transparent);opacity:.55;}
#webdesign .webPlanetLink:hover{transform:translateY(-10px) scale(1.015);border-color:rgba(100,239,255,.25);background:linear-gradient(180deg,rgba(255,255,255,.105),rgba(255,255,255,.038));box-shadow:0 34px 88px rgba(0,0,0,.42),0 0 38px rgba(100,239,255,.10),0 0 46px rgba(127,92,255,.07),inset 0 0 0 1px rgba(255,255,255,.04);}
#webdesign .webPlanetNumber{position:absolute;right:18px;top:16px;font-weight:950;font-size:12px;letter-spacing:.12em;color:rgba(255,248,239,.38);z-index:2;}
#webdesign .webPlanetLogo{position:relative;z-index:2;width:112px;height:112px;border-radius:50%;display:grid;place-items:center;padding:19px;background:radial-gradient(circle at 50% 35%,rgba(255,255,255,.12),transparent 52%),rgba(5,7,16,.62);border:1px solid rgba(255,255,255,.08);box-shadow:0 18px 38px rgba(0,0,0,.28),0 0 32px rgba(255,184,107,.06);}
#webdesign .webPlanetLogo:after{content:"";position:absolute;inset:-7px;border-radius:50%;border:1px solid rgba(100,239,255,.14);border-left-color:rgba(255,184,107,.34);animation:planetSpin 9s linear infinite;}
@keyframes planetSpin{to{transform:rotate(360deg)}}
#webdesign .webPlanetLogo img{width:100%;max-height:72px;object-fit:contain;filter:drop-shadow(0 14px 24px rgba(0,0,0,.42));}
#webdesign .webPlanetCopy{position:relative;z-index:2;display:flex;flex-direction:column;gap:8px;}
#webdesign .webPlanetCopy em{font-style:normal;color:#dffcff;font-size:10px;font-weight:950;letter-spacing:.14em;text-transform:uppercase;}
#webdesign .webPlanetCopy strong{font-size:clamp(23px,2vw,33px);line-height:.92;letter-spacing:-.045em;text-transform:uppercase;color:#fff8ef;}
#webdesign .webPlanetCopy small{color:rgba(255,248,239,.70);font-size:13.5px;line-height:1.55;}
#webdesign .webPlanetCTA{position:relative;z-index:2;grid-column:1/-1;justify-self:start;margin-top:2px;padding:10px 13px;border-radius:999px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.085);font-size:11px;font-weight:950;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,248,239,.82);}
#webdesign .webPlanetCTA:after{content:"  ↗";color:var(--sun)}
@media(max-width:1100px){#webdesign .webUniverseStage{min-height:auto;padding:22px}#webdesign .webOrbitMap{display:none}#webdesign .webUniverseList{position:relative;display:grid;grid-template-columns:1fr;gap:16px}#webdesign .webPlanetCard,#webdesign .webPlanetCard.orbit-a,#webdesign .webPlanetCard.orbit-b,#webdesign .webPlanetCard.orbit-c{position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:none;width:100%;min-width:0}#webdesign .webPlanetLink{min-height:0}}
@media(max-width:700px){#webdesign .webUniverseHeader{display:grid;text-align:left}#webdesign .webUniverseHeader strong{text-align:left}#webdesign .webPlanetLink{grid-template-columns:86px 1fr;padding:17px;border-radius:24px}#webdesign .webPlanetLogo{width:86px;height:86px;padding:15px}#webdesign .webPlanetCopy strong{font-size:24px}}



/* v98 Webdesign Referenzen frei mit Klick Explosion */
#webdesign .freeOrbitRefs{position:relative;margin-top:34px;min-height:560px}
#webdesign .freeOrbitScene{position:relative;min-height:560px;padding:12px 0 240px;isolation:isolate}
#webdesign .freeOrbitStars{position:absolute;inset:0;pointer-events:none;background:
radial-gradient(circle at 18% 22%, rgba(100,239,255,.16) 0 2px, transparent 2.8px),
radial-gradient(circle at 32% 64%, rgba(255,255,255,.14) 0 1.6px, transparent 2.2px),
radial-gradient(circle at 52% 18%, rgba(127,92,255,.16) 0 2px, transparent 2.6px),
radial-gradient(circle at 68% 74%, rgba(255,184,107,.16) 0 2px, transparent 2.8px),
radial-gradient(circle at 82% 32%, rgba(255,255,255,.13) 0 1.5px, transparent 2.2px),
radial-gradient(circle at 50% 46%, rgba(100,239,255,.08) 0 18%, transparent 48%);
opacity:.85;filter:blur(.1px)}
#webdesign .freeOrbitLogo{position:absolute;display:grid;place-items:center;border:none;background:transparent;padding:0;cursor:pointer;z-index:3;transition:transform .34s ease, opacity .34s ease}
#webdesign .freeOrbitLogo img{display:block;max-width:100%;height:auto;filter:drop-shadow(0 12px 26px rgba(0,0,0,.34)) drop-shadow(0 0 18px rgba(100,239,255,.06));transition:transform .34s ease, filter .34s ease}
#webdesign .freeOrbitLogo:hover img,#webdesign .freeOrbitLogo:focus-visible img{transform:translateY(-4px) scale(1.045);filter:drop-shadow(0 18px 34px rgba(0,0,0,.42)) drop-shadow(0 0 26px rgba(100,239,255,.16))}
#webdesign .freeOrbitLogo:focus-visible{outline:none}
#webdesign .freeOrbitLogo .logoPulse{position:absolute;left:50%;top:50%;width:46%;height:46%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle, rgba(100,239,255,.18), rgba(127,92,255,.08) 52%, rgba(255,184,107,0) 74%);filter:blur(22px);z-index:-1;animation:freeLogoPulse 4.6s ease-in-out infinite}
#webdesign .freeOrbitLogo.pos-1{left:4%;top:30%;width:min(30vw,240px)}
#webdesign .freeOrbitLogo.pos-2{left:37%;top:8%;width:min(28vw,225px)}
#webdesign .freeOrbitLogo.pos-3{right:4%;top:32%;width:min(28vw,220px)}
#webdesign .freeOrbitLogo.is-active img{transform:scale(1.05);filter:drop-shadow(0 18px 38px rgba(0,0,0,.44)) drop-shadow(0 0 28px rgba(100,239,255,.17))}
#webdesign .freeOrbitLogo.is-exploding{animation:logoKick .82s cubic-bezier(.17,.85,.22,1)}
#webdesign .freeOrbitLogo .blast{position:absolute;left:50%;top:50%;width:10px;height:10px;border-radius:50%;pointer-events:none;background:var(--particle, rgba(100,239,255,.95));box-shadow:0 0 16px var(--particle, rgba(100,239,255,.95));transform:translate(-50%,-50%) rotate(var(--angle)) translateX(0) scale(.6);opacity:1;animation:freeParticleBlast .92s cubic-bezier(.2,.8,.16,1) forwards}
#webdesign .projectReveal{position:absolute;left:50%;bottom:0;transform:translateX(-50%) translateY(16px);width:min(880px,100%);opacity:0;pointer-events:none;transition:opacity .34s ease, transform .44s ease}
#webdesign .projectReveal.is-visible{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
#webdesign .projectRevealGlow{position:absolute;inset:-18px -10px auto;border-radius:30px;height:100%;background:radial-gradient(circle at 20% 12%, rgba(100,239,255,.09), transparent 36%),radial-gradient(circle at 82% 10%, rgba(127,92,255,.10), transparent 34%),radial-gradient(circle at 52% 100%, rgba(255,184,107,.08), transparent 34%);filter:blur(18px);pointer-events:none}
#webdesign .projectRevealInner{position:relative;display:grid;gap:12px;padding:28px 30px;border-radius:28px;background:linear-gradient(180deg, rgba(9,13,28,.78), rgba(7,10,21,.90));border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(12px);box-shadow:0 22px 64px rgba(0,0,0,.30), inset 0 0 0 1px rgba(255,255,255,.02)}
#webdesign .projectEyebrow{display:inline-flex;align-self:start;padding:8px 12px;border-radius:999px;background:rgba(100,239,255,.08);border:1px solid rgba(100,239,255,.10);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(100,239,255,.9)}
#webdesign .projectTitle{margin:0;font-size:clamp(30px,3vw,46px);line-height:.96;text-transform:uppercase;color:#fff8ef}
#webdesign .projectText{margin:0;max-width:70ch;color:rgba(255,248,239,.80);line-height:1.72}
#webdesign .projectLink{display:inline-flex;align-items:center;gap:10px;width:max-content;padding:13px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:linear-gradient(135deg, rgba(100,239,255,.14), rgba(127,92,255,.14), rgba(255,184,107,.12));color:#fff;text-decoration:none;transition:transform .22s ease, box-shadow .22s ease}
#webdesign .projectLink:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.26),0 0 18px rgba(100,239,255,.08)}
@keyframes freeLogoPulse{0%,100%{opacity:.28;transform:translate(-50%,-50%) scale(.92)}50%{opacity:.72;transform:translate(-50%,-50%) scale(1.18)}}
@keyframes freeParticleBlast{0%{opacity:1;transform:translate(-50%,-50%) rotate(var(--angle)) translateX(0) scale(.6)}100%{opacity:0;transform:translate(-50%,-50%) rotate(var(--angle)) translateX(var(--dist)) scale(1.14)}}
@keyframes logoKick{0%{transform:scale(1)}25%{transform:scale(1.09)}100%{transform:scale(1)}}
@media (max-width: 980px){
  #webdesign .freeOrbitScene{min-height:700px;padding-bottom:250px}
  #webdesign .freeOrbitLogo.pos-1{left:2%;top:24%;width:min(44vw,220px)}
  #webdesign .freeOrbitLogo.pos-2{left:50%;top:4%;transform:translateX(-50%);width:min(40vw,220px)}
  #webdesign .freeOrbitLogo.pos-3{right:2%;top:28%;width:min(40vw,210px)}
}
@media (max-width: 760px){
  #webdesign .freeOrbitRefs{min-height:auto}
  #webdesign .freeOrbitScene{display:grid;gap:20px;min-height:auto;padding:6px 0 0}
  #webdesign .freeOrbitStars{inset:0 0 auto;height:240px}
  #webdesign .freeOrbitLogo{position:relative;left:auto !important;right:auto !important;top:auto !important;transform:none !important;width:min(68vw,250px);margin:0 auto}
  #webdesign .projectReveal{position:relative;left:auto;bottom:auto;transform:none;width:100%;margin-top:4px}
  #webdesign .projectReveal.is-visible{transform:none}
  #webdesign .projectRevealInner{padding:24px}
}


/* v99 orbit lines + galaxy spheres + coordinates */
#webdesign .freeOrbitScene{min-height:620px;padding-top:18px;padding-bottom:250px}
#webdesign .freeOrbitMap{position:absolute;inset:0;pointer-events:none;z-index:1}
#webdesign .orbitHub{position:absolute;left:50%;top:39%;width:70px;height:70px;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle, rgba(255,255,255,.9) 0%, rgba(100,239,255,.45) 24%, rgba(127,92,255,.18) 48%, rgba(5,8,20,0) 72%);box-shadow:0 0 30px rgba(100,239,255,.22),0 0 70px rgba(127,92,255,.14);opacity:.85}
#webdesign .orbitRing{position:absolute;left:50%;top:39%;border-radius:50%;transform:translate(-50%,-50%);border:1px solid rgba(255,255,255,.08);box-shadow:0 0 0 1px rgba(255,255,255,.02) inset}
#webdesign .orbitRingOne{width:min(66vw,620px);height:min(24vw,220px);border-color:rgba(100,239,255,.10)}
#webdesign .orbitRingTwo{width:min(84vw,840px);height:min(34vw,330px);border-color:rgba(127,92,255,.10);transform:translate(-50%,-50%) rotate(-11deg)}
#webdesign .orbitRingThree{width:min(56vw,520px);height:min(18vw,160px);border-color:rgba(255,184,107,.09);transform:translate(-50%,-50%) rotate(13deg)}
#webdesign .orbitPath{position:absolute;height:1px;transform-origin:left center;background:linear-gradient(90deg, rgba(255,255,255,.22), rgba(255,255,255,.05));opacity:.46}
#webdesign .orbitPathOne{left:19%;top:42%;width:27%;transform:rotate(-8deg)}
#webdesign .orbitPathTwo{left:50%;top:24%;width:12%;transform:rotate(-74deg)}
#webdesign .orbitPathThree{left:58%;top:42%;width:24%;transform:rotate(10deg)}
#webdesign .orbitNode{position:absolute;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.55);box-shadow:0 0 10px rgba(255,255,255,.35)}
#webdesign .orbitNodeOne{left:20.3%;top:41.3%}
#webdesign .orbitNodeTwo{left:60.8%;top:22.4%}
#webdesign .orbitNodeThree{left:80.8%;top:46.2%}
#webdesign .freeOrbitStars{background:
radial-gradient(circle at 18% 22%, rgba(100,239,255,.16) 0 2px, transparent 2.8px),
radial-gradient(circle at 32% 64%, rgba(255,255,255,.14) 0 1.6px, transparent 2.2px),
radial-gradient(circle at 52% 18%, rgba(127,92,255,.16) 0 2px, transparent 2.6px),
radial-gradient(circle at 68% 74%, rgba(255,184,107,.16) 0 2px, transparent 2.8px),
radial-gradient(circle at 82% 32%, rgba(255,255,255,.13) 0 1.5px, transparent 2.2px),
radial-gradient(circle at 50% 46%, rgba(100,239,255,.06) 0 18%, transparent 48%),
radial-gradient(circle at 50% 39%, rgba(127,92,255,.05) 0 26%, transparent 50%)}
#webdesign .freeOrbitLogo{z-index:3}
#webdesign .freeOrbitLogo::before{content:"";position:absolute;inset:10% 12%;border-radius:50%;background:radial-gradient(circle at 50% 50%, rgba(255,255,255,.12), rgba(100,239,255,.07) 28%, rgba(127,92,255,.06) 46%, rgba(255,184,107,.03) 58%, rgba(5,8,20,0) 68%);filter:blur(10px);z-index:-2;opacity:.95}
#webdesign .freeOrbitLogo::after{content:"";position:absolute;inset:16% 18%;border-radius:50%;border:1px solid rgba(255,255,255,.08);box-shadow:0 0 0 1px rgba(100,239,255,.04) inset, 0 0 24px rgba(100,239,255,.10);z-index:-1}
#webdesign .freeOrbitLogo.pos-1{left:6%;top:31%;width:min(28vw,220px)}
#webdesign .freeOrbitLogo.pos-2{left:38%;top:8%;width:min(26vw,205px)}
#webdesign .freeOrbitLogo.pos-3{right:6%;top:32%;width:min(26vw,200px)}
#webdesign .freeOrbitLogo .logoPulse{width:54%;height:54%;background:radial-gradient(circle, rgba(100,239,255,.22), rgba(127,92,255,.10) 44%, rgba(255,184,107,.07) 62%, rgba(255,184,107,0) 78%);filter:blur(24px)}
#webdesign .projectReveal{z-index:4}
#webdesign .projectRevealInner{gap:14px;background:linear-gradient(180deg, rgba(10,14,30,.82), rgba(7,10,21,.92));border:1px solid rgba(255,255,255,.10)}
#webdesign .projectCoordinates{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;width:100%;margin-top:-2px}
#webdesign .projectCoordinates span{display:flex;flex-direction:column;gap:6px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(232,240,255,.80)}
#webdesign .projectCoordinates b{font-size:10px;letter-spacing:.18em;color:rgba(100,239,255,.84)}
@media (max-width: 980px){
 #webdesign .freeOrbitScene{min-height:730px}
 #webdesign .orbitHub,#webdesign .orbitRing,#webdesign .orbitPath,#webdesign .orbitNode{display:none}
 #webdesign .freeOrbitLogo.pos-1{left:3%;top:24%;width:min(42vw,220px)}
 #webdesign .freeOrbitLogo.pos-2{left:50%;top:6%;transform:translateX(-50%);width:min(40vw,210px)}
 #webdesign .freeOrbitLogo.pos-3{right:3%;top:30%;width:min(40vw,205px)}
 #webdesign .projectCoordinates{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 760px){
 #webdesign .projectCoordinates{grid-template-columns:1fr 1fr}
}


/* v100 vertikales Sonnensystem für Webdesign Referenzen */
#webdesign .solarSystemRefs{margin-top:34px;position:relative}
#webdesign .solarSystemVertical{position:relative;display:grid;gap:34px;min-height:760px;padding:18px 0 0;isolation:isolate}
#webdesign .solarBackdrop{position:absolute;inset:0;pointer-events:none;z-index:0}
#webdesign .solarGlow{position:absolute;border-radius:50%;filter:blur(38px);opacity:.55}
#webdesign .solarGlowOne{width:220px;height:220px;left:8%;top:8%;background:radial-gradient(circle, rgba(100,239,255,.18), rgba(100,239,255,0) 70%)}
#webdesign .solarGlowTwo{width:280px;height:280px;right:8%;top:32%;background:radial-gradient(circle, rgba(127,92,255,.16), rgba(127,92,255,0) 72%)}
#webdesign .solarGlowThree{width:240px;height:240px;left:20%;bottom:10%;background:radial-gradient(circle, rgba(255,184,107,.16), rgba(255,184,107,0) 72%)}
#webdesign .solarAxis{position:absolute;left:50%;top:40px;bottom:250px;width:2px;transform:translateX(-50%);background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(100,239,255,.22), rgba(127,92,255,.18), rgba(255,184,107,.16), rgba(255,255,255,.03));box-shadow:0 0 24px rgba(100,239,255,.08)}
#webdesign .solarPlanets{position:relative;z-index:2;display:grid;gap:74px;padding-top:22px}
#webdesign .solarEntry{position:relative;display:grid;justify-items:center;gap:18px;border:none;background:transparent;padding:0;cursor:pointer;transition:transform .28s ease, opacity .28s ease}
#webdesign .solarEntry:hover,#webdesign .solarEntry:focus-visible{transform:translateY(-3px);outline:none}
#webdesign .solarOrbit{position:absolute;left:50%;top:50%;width:min(72vw,760px);height:140px;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(255,255,255,.08);box-shadow:0 0 0 1px rgba(255,255,255,.02) inset;opacity:.8}
#webdesign .solarEntry:nth-child(1) .solarOrbit{width:min(56vw,560px);height:108px;border-color:rgba(100,239,255,.12)}
#webdesign .solarEntry:nth-child(2) .solarOrbit{width:min(82vw,820px);height:152px;border-color:rgba(127,92,255,.12)}
#webdesign .solarEntry:nth-child(3) .solarOrbit{width:min(66vw,650px);height:126px;border-color:rgba(255,184,107,.12)}
#webdesign .solarPlanet{position:relative;display:grid;place-items:center;width:154px;height:154px;border-radius:50%;padding:22px;z-index:2;transition:transform .34s ease, box-shadow .34s ease, filter .34s ease}
#webdesign .solarPlanet::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle at 35% 28%, rgba(255,255,255,.36), rgba(255,255,255,.10) 16%, rgba(255,255,255,.04) 30%, rgba(5,8,20,.24) 56%, rgba(5,8,20,.88) 100%);box-shadow:inset -18px -26px 38px rgba(0,0,0,.26), inset 0 0 0 1px rgba(255,255,255,.08)}
#webdesign .solarPlanet::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1px solid rgba(255,255,255,.08);opacity:.8}
#webdesign .solarPlanet.tone-cyan{box-shadow:0 0 34px rgba(100,239,255,.18), 0 14px 34px rgba(0,0,0,.30)}
#webdesign .solarPlanet.tone-violet{box-shadow:0 0 34px rgba(127,92,255,.18), 0 14px 34px rgba(0,0,0,.30)}
#webdesign .solarPlanet.tone-orange{box-shadow:0 0 34px rgba(255,184,107,.18), 0 14px 34px rgba(0,0,0,.30)}
#webdesign .solarPlanet img{position:relative;z-index:1;max-width:88%;height:auto;filter:drop-shadow(0 12px 24px rgba(0,0,0,.32));transition:transform .34s ease}
#webdesign .solarEntry:hover .solarPlanet img,#webdesign .solarEntry.is-active .solarPlanet img{transform:scale(1.04)}
#webdesign .solarEntry.is-active .solarPlanet{transform:scale(1.05)}
#webdesign .solarPlanetLabel{position:relative;z-index:2;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(230,242,255,.72)}
#webdesign .solarInfoPanel{position:relative;z-index:3;opacity:0;transform:translateY(12px);transition:opacity .3s ease, transform .4s ease}
#webdesign .solarInfoPanel.is-visible{opacity:1;transform:translateY(0)}
#webdesign .solarInfoInner{position:relative;padding:30px 32px;border-radius:28px;background:linear-gradient(180deg, rgba(9,13,28,.78), rgba(7,10,21,.92));border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(12px);box-shadow:0 24px 66px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.02)}
#webdesign .solarInfoInner::before{content:"";position:absolute;inset:-1px;border-radius:28px;background:linear-gradient(135deg, rgba(100,239,255,.10), rgba(127,92,255,.08), rgba(255,184,107,.08));mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);padding:1px;-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
#webdesign .solarEyebrow{display:inline-flex;align-self:start;padding:8px 12px;border-radius:999px;background:rgba(100,239,255,.08);border:1px solid rgba(100,239,255,.10);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(100,239,255,.90)}
#webdesign .solarTitle{margin:14px 0 12px;font-size:clamp(30px,3vw,48px);line-height:.96;text-transform:uppercase;color:#fff8ef}
#webdesign .solarText{margin:0;max-width:74ch;color:rgba(255,248,239,.80);line-height:1.74}
#webdesign .solarDetailRow{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
#webdesign .solarDetailRow span{padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(232,240,255,.80)}
#webdesign .solarProjectLink{display:inline-flex;align-items:center;gap:10px;margin-top:20px;padding:13px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:linear-gradient(135deg, rgba(100,239,255,.14), rgba(127,92,255,.14), rgba(255,184,107,.12));color:#fff;text-decoration:none;transition:transform .22s ease, box-shadow .22s ease}
#webdesign .solarProjectLink:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.26),0 0 18px rgba(100,239,255,.08)}
@media (max-width:900px){
  #webdesign .solarSystemVertical{min-height:auto;gap:28px}
  #webdesign .solarAxis{left:50%;top:28px;bottom:280px}
  #webdesign .solarPlanets{gap:54px}
  #webdesign .solarOrbit{width:min(92vw,640px) !important;height:110px !important}
  #webdesign .solarPlanet{width:132px;height:132px;padding:18px}
}
@media (max-width:640px){
  #webdesign .solarSystemVertical{padding-top:10px}
  #webdesign .solarAxis{display:none}
  #webdesign .solarPlanets{gap:26px}
  #webdesign .solarOrbit{width:100% !important;height:96px !important}
  #webdesign .solarPlanet{width:118px;height:118px;padding:16px}
  #webdesign .solarPlanetLabel{font-size:11px;letter-spacing:.14em;text-align:center}
  #webdesign .solarInfoInner{padding:24px}
  #webdesign .solarDetailRow{gap:8px}
}


/* v101 Constellation Grid Webdesign Referenzen */
#webdesign .constellationRefs{position:relative;margin-top:clamp(34px,5vh,58px);isolation:isolate}
#webdesign .constellationHeader{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px;color:rgba(255,248,239,.82)}
#webdesign .constellationHeader span{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(100,239,255,.82)}
#webdesign .constellationHeader strong{font-size:clamp(18px,1.5vw,24px);line-height:1.15;text-align:right;color:#fff8ef;max-width:520px}
#webdesign .constellationViewport{position:relative;height:min(70vh,610px);min-height:500px;overflow:hidden;border-radius:0;background:transparent}
#webdesign .constellationViewport::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 22% 50%,rgba(100,239,255,.10),transparent 28%),radial-gradient(circle at 65% 20%,rgba(127,92,255,.12),transparent 32%),radial-gradient(circle at 80% 70%,rgba(255,184,107,.09),transparent 30%),radial-gradient(circle at 50% 50%,rgba(255,255,255,.04),transparent 55%);filter:blur(4px);pointer-events:none}
#webdesign .constellationCamera{position:absolute;inset:0;transform-origin:50% 50%;transition:transform .12s linear;will-change:transform}
#webdesign .constellationCamera::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 12% 24%,rgba(255,255,255,.18) 0 1.3px,transparent 1.9px),radial-gradient(circle at 34% 78%,rgba(255,255,255,.13) 0 1px,transparent 1.7px),radial-gradient(circle at 71% 19%,rgba(100,239,255,.16) 0 1.4px,transparent 2px),radial-gradient(circle at 86% 62%,rgba(255,184,107,.14) 0 1.2px,transparent 1.8px);opacity:.9;pointer-events:none}
#webdesign .constellationLines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1}
#webdesign .constellationLine{fill:none;stroke:url(#serviceLineA);stroke-width:1.8;stroke-dasharray:7 12;opacity:.28;filter:drop-shadow(0 0 8px rgba(100,239,255,.10));animation:constellationPulse 4s ease-in-out infinite}
#webdesign .constellationLine.is-active{opacity:.92;stroke-width:2.5;stroke-dasharray:10 8;filter:drop-shadow(0 0 14px rgba(100,239,255,.26)) drop-shadow(0 0 18px rgba(127,92,255,.18))}
#webdesign .serviceNode{position:absolute;left:var(--x);top:var(--y);z-index:2;transform:translate(-50%,-50%);padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.08);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:rgba(240,247,255,.58);backdrop-filter:blur(8px);transition:color .25s ease,border-color .25s ease,box-shadow .25s ease,background .25s ease}
#webdesign .serviceNode.is-active{color:rgba(255,248,239,.94);border-color:rgba(100,239,255,.24);background:rgba(100,239,255,.07);box-shadow:0 0 18px rgba(100,239,255,.12)}
#webdesign .constellationStar{position:absolute;z-index:3;display:grid;place-items:center;border:0;background:transparent;padding:0;cursor:pointer;transform:translate(-50%,-50%);transition:transform .34s ease,filter .34s ease}
#webdesign .constellationStar img{position:relative;z-index:2;max-width:82%;height:auto;filter:drop-shadow(0 18px 32px rgba(0,0,0,.42));transition:transform .34s ease,filter .34s ease}
#webdesign .constellationStar .starHalo{position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.22),rgba(100,239,255,.16) 26%,rgba(127,92,255,.08) 48%,rgba(0,0,0,0) 72%);filter:blur(10px);animation:starBreath 4.8s ease-in-out infinite;z-index:0}
#webdesign .constellationStar::after{content:"";position:absolute;inset:11%;border-radius:50%;border:1px solid rgba(255,255,255,.10);box-shadow:0 0 28px rgba(100,239,255,.08);z-index:1}
#webdesign .constellationStar:hover img,#webdesign .constellationStar.is-active img{transform:scale(1.05);filter:drop-shadow(0 22px 38px rgba(0,0,0,.46)) drop-shadow(0 0 24px rgba(100,239,255,.18))}
#webdesign .constellationStar.is-active .starHalo{background:radial-gradient(circle,rgba(255,255,255,.35),rgba(100,239,255,.24) 28%,rgba(127,92,255,.14) 50%,rgba(255,184,107,.06) 66%,rgba(0,0,0,0) 76%)}
#webdesign .star-lukei{left:19%;top:54%;width:min(25vw,205px);height:min(25vw,205px)}
#webdesign .star-eren{left:61%;top:30%;width:min(27vw,220px);height:min(27vw,220px)}
#webdesign .star-n2{left:83%;top:71%;width:min(24vw,196px);height:min(24vw,196px)}
#webdesign .constellationInfo{position:relative;z-index:4;opacity:0;transform:translateY(14px);transition:opacity .34s ease,transform .44s ease;margin-top:22px}
#webdesign .constellationInfo.is-visible{opacity:1;transform:translateY(0)}
#webdesign .constellationInfoInner{position:relative;padding:30px 32px;border-radius:28px;background:linear-gradient(180deg,rgba(9,13,28,.78),rgba(7,10,21,.92));border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(12px);box-shadow:0 24px 66px rgba(0,0,0,.32),inset 0 0 0 1px rgba(255,255,255,.02)}
#webdesign .constellationEyebrow{display:inline-flex;padding:8px 12px;border-radius:999px;background:rgba(100,239,255,.08);border:1px solid rgba(100,239,255,.10);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(100,239,255,.90)}
#webdesign .constellationTitle{margin:14px 0 12px;font-size:clamp(30px,3vw,48px);line-height:.96;text-transform:uppercase;color:#fff8ef}
#webdesign .constellationText{margin:0;max-width:74ch;color:rgba(255,248,239,.80);line-height:1.74}
#webdesign .constellationServices{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
#webdesign .constellationServices span{padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(232,240,255,.80)}
#webdesign .constellationLink{display:inline-flex;align-items:center;gap:10px;margin-top:20px;padding:13px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:linear-gradient(135deg,rgba(100,239,255,.14),rgba(127,92,255,.14),rgba(255,184,107,.12));color:#fff;text-decoration:none;transition:transform .22s ease,box-shadow .22s ease}
#webdesign .constellationLink:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.26),0 0 18px rgba(100,239,255,.08)}
#webdesign .classicRefsShortcut{margin-top:16px;color:rgba(255,248,239,.76)}
#webdesign .classicRefsShortcut summary{cursor:pointer;width:max-content;max-width:100%;padding:12px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
#webdesign .classicRefsList{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
#webdesign .classicRefsList a{display:grid;gap:6px;padding:16px;border-radius:18px;border:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.03);text-decoration:none;color:#fff}
#webdesign .classicRefsList span{color:rgba(255,248,239,.62);font-size:13px;line-height:1.4}
@keyframes constellationPulse{0%,100%{stroke-dashoffset:0}50%{stroke-dashoffset:-30}}
@keyframes starBreath{0%,100%{opacity:.55;transform:scale(.92)}50%{opacity:.9;transform:scale(1.08)}}
@media(max-width:980px){#webdesign .constellationViewport{height:560px;min-height:480px}#webdesign .star-lukei{left:22%;top:52%;width:200px;height:200px}#webdesign .star-eren{left:58%;top:28%;width:210px;height:210px}#webdesign .star-n2{left:78%;top:70%;width:190px;height:190px}#webdesign .classicRefsList{grid-template-columns:1fr}}
@media(max-width:700px){#webdesign .constellationHeader{display:grid}#webdesign .constellationHeader strong{text-align:left}.constellationLines,.serviceNode{display:none!important}#webdesign .constellationViewport{height:auto;min-height:auto;display:grid;gap:24px;overflow:visible}#webdesign .constellationCamera{position:relative;display:grid;gap:26px;transform:none!important}.constellationCamera::before{display:none}#webdesign .constellationStar{position:relative;left:auto!important;top:auto!important;transform:none;width:180px!important;height:180px!important;margin:0 auto}#webdesign .constellationInfoInner{padding:24px}}


/* v102 Hyperraum Tunnel für Webdesign Referenzen */
#webdesign .warpRefs{position:relative;margin-top:clamp(34px,5vh,58px);isolation:isolate}
#webdesign .warpHeader{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px;color:rgba(255,248,239,.82)}
#webdesign .warpHeader span{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(100,239,255,.82)}
#webdesign .warpHeader strong{font-size:clamp(18px,1.5vw,24px);line-height:1.15;text-align:right;color:#fff8ef;max-width:560px}
#webdesign .warpViewport{position:relative;height:min(74vh,660px);min-height:520px;overflow:hidden;border-radius:32px;background:radial-gradient(circle at 50% 42%,rgba(100,239,255,.08),transparent 16%),radial-gradient(circle at 24% 20%,rgba(127,92,255,.12),transparent 28%),radial-gradient(circle at 80% 74%,rgba(255,184,107,.10),transparent 24%),linear-gradient(180deg,rgba(8,11,24,.72),rgba(4,5,10,.92));border:1px solid rgba(255,255,255,.08);box-shadow:0 30px 90px rgba(0,0,0,.36),inset 0 0 0 1px rgba(255,255,255,.02)}
#webdesign .warpViewport::before{content:"";position:absolute;inset:-20% -10%;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.06) 0 2px,transparent 2.2px),radial-gradient(circle at 30% 32%,rgba(255,255,255,.05) 0 1.5px,transparent 1.8px),radial-gradient(circle at 70% 62%,rgba(100,239,255,.06) 0 1.7px,transparent 2px);background-size:120px 120px,170px 170px,210px 210px;opacity:.55;pointer-events:none}
#webdesign .warpViewport::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.06),transparent 44%);pointer-events:none;mix-blend-mode:screen}
#webdesign .warpDepthGlow{position:absolute;border-radius:50%;filter:blur(30px);pointer-events:none;opacity:.55}
#webdesign .warpDepthGlowA{width:240px;height:240px;left:-40px;top:10%;background:radial-gradient(circle,rgba(100,239,255,.18),rgba(100,239,255,0) 70%)}
#webdesign .warpDepthGlowB{width:280px;height:280px;right:-50px;bottom:6%;background:radial-gradient(circle,rgba(127,92,255,.18),rgba(127,92,255,0) 72%)}
#webdesign .warpStarfield{position:absolute;inset:0;background:linear-gradient(90deg, transparent 0 49%, rgba(255,255,255,.06) 49.5%, transparent 50.4%),repeating-linear-gradient(90deg, rgba(255,255,255,.028) 0 1px, transparent 1px 76px),repeating-linear-gradient(0deg, rgba(255,255,255,.018) 0 1px, transparent 1px 76px);opacity:.18;transform-origin:50% 50%;animation:warpDrift 10s linear infinite;pointer-events:none}
@keyframes warpDrift{0%{transform:scale(1) rotate(0deg)}100%{transform:scale(1.08) rotate(.001deg)}}
#webdesign .warpScene{position:absolute;inset:0;perspective:1600px;perspective-origin:50% 50%;transform-style:preserve-3d;will-change:transform}
#webdesign .warpDockHint{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);padding:10px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.08);background:rgba(5,8,20,.42);backdrop-filter:blur(8px);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:rgba(232,240,255,.68);z-index:5}
#webdesign .warpCard{position:absolute;left:50%;top:50%;width:min(360px,32vw);aspect-ratio:1/.84;transform-style:preserve-3d;border:0;background:transparent;padding:0;cursor:pointer;z-index:3;transition:filter .28s ease, opacity .28s ease}
#webdesign .warpCardShell{position:relative;display:grid;align-content:start;gap:14px;height:100%;padding:18px 18px 20px;border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.10);backdrop-filter:blur(18px);overflow:hidden;box-shadow:0 24px 70px rgba(0,0,0,.34),inset 0 0 0 1px rgba(255,255,255,.02)}
#webdesign .warpCardShell::before{content:"";position:absolute;inset:0;background:linear-gradient(125deg,transparent 16%,rgba(255,255,255,.08) 34%,transparent 48%,rgba(100,239,255,.08) 60%,transparent 74%);transform:translateX(-120%);opacity:.75}
#webdesign .warpCard.is-focus .warpCardShell::before{animation:warpShine 1.6s ease both}
@keyframes warpShine{0%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
#webdesign .warpCardAura{position:absolute;inset:-16px;border-radius:32px;pointer-events:none;opacity:.0;transition:opacity .24s ease;filter:blur(18px)}
#webdesign .warpCard.tone-cyan .warpCardAura{background:radial-gradient(circle,rgba(100,239,255,.28),rgba(100,239,255,0) 66%)}
#webdesign .warpCard.tone-violet .warpCardAura{background:radial-gradient(circle,rgba(127,92,255,.28),rgba(127,92,255,0) 66%)}
#webdesign .warpCard.tone-orange .warpCardAura{background:radial-gradient(circle,rgba(255,184,107,.28),rgba(255,184,107,0) 66%)}
#webdesign .warpCard.is-focus .warpCardAura,#webdesign .warpCard:hover .warpCardAura{opacity:1}
#webdesign .warpBrowserBar{display:flex;gap:8px}
#webdesign .warpBrowserBar i{display:block;width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.18)}
#webdesign .warpProjectEyebrow{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(225,238,255,.66)}
#webdesign .warpLogoWrap{display:grid;place-items:center;min-height:142px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.06)}
#webdesign .warpLogoWrap img{max-width:82%;height:auto;filter:drop-shadow(0 18px 28px rgba(0,0,0,.34));transition:transform .3s ease}
#webdesign .warpCard:hover .warpLogoWrap img,#webdesign .warpCard.is-focus .warpLogoWrap img{transform:scale(1.03)}
#webdesign .warpMiniLines{display:grid;gap:8px}
#webdesign .warpMiniLines b{display:block;height:10px;border-radius:999px;background:linear-gradient(90deg,rgba(255,255,255,.14),rgba(255,255,255,.04));width:100%}
#webdesign .warpMiniLines b:nth-child(2){width:84%}
#webdesign .warpMiniLines b:nth-child(3){width:62%}
#webdesign .warpInfo{position:relative;margin-top:22px;opacity:0;transform:translateY(14px);transition:opacity .3s ease,transform .4s ease}
#webdesign .warpInfo.is-visible{opacity:1;transform:translateY(0)}
#webdesign .warpInfoGlitch{position:absolute;inset:-6px;border-radius:30px;pointer-events:none;background:linear-gradient(90deg,rgba(100,239,255,.06),transparent 24%,rgba(127,92,255,.06) 48%,transparent 68%,rgba(255,184,107,.05));opacity:0}
#webdesign .warpInfo.is-docking .warpInfoGlitch{animation:warpGlitch .45s linear 1}
@keyframes warpGlitch{0%{opacity:0;transform:translateX(0)}20%{opacity:.9;transform:translateX(-4px)}40%{opacity:.5;transform:translateX(4px)}60%{opacity:.95;transform:translateX(-2px)}100%{opacity:0;transform:translateX(0)}}
#webdesign .warpInfoInner{position:relative;padding:30px 32px;border-radius:28px;background:linear-gradient(180deg,rgba(9,13,28,.78),rgba(7,10,21,.92));border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(12px);box-shadow:0 24px 66px rgba(0,0,0,.32),inset 0 0 0 1px rgba(255,255,255,.02)}
#webdesign .warpInfoEyebrow{display:inline-flex;padding:8px 12px;border-radius:999px;background:rgba(100,239,255,.08);border:1px solid rgba(100,239,255,.10);font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(100,239,255,.90)}
#webdesign .warpInfoTitle{margin:14px 0 12px;font-size:clamp(30px,3vw,48px);line-height:.96;text-transform:uppercase;color:#fff8ef}
#webdesign .warpInfoText{margin:0;max-width:74ch;color:rgba(255,248,239,.80);line-height:1.74}
#webdesign .warpInfoTags{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
#webdesign .warpInfoTags span{padding:10px 14px;border-radius:999px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(232,240,255,.80)}
#webdesign .warpInfoLink{display:inline-flex;align-items:center;gap:10px;margin-top:20px;padding:13px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.10);background:linear-gradient(135deg,rgba(100,239,255,.14),rgba(127,92,255,.14),rgba(255,184,107,.12));color:#fff;text-decoration:none;transition:transform .22s ease, box-shadow .22s ease}
#webdesign .warpInfoLink:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(0,0,0,.26),0 0 18px rgba(100,239,255,.08)}
@media(max-width:900px){#webdesign .warpHeader{flex-direction:column;align-items:flex-start}#webdesign .warpHeader strong{text-align:left}#webdesign .warpCard{width:min(58vw,320px)}}
@media(max-width:640px){#webdesign .warpViewport{height:560px;min-height:560px;border-radius:24px}#webdesign .warpCard{width:min(72vw,290px)}#webdesign .warpDockHint{font-size:10px;bottom:14px}#webdesign .warpInfoInner{padding:24px}}


/* v103 ruhige horizontale Referenzen */
#webdesign .cleanRefs{position:relative;grid-column:1/-1;width:100%;margin-top:clamp(34px,5vh,58px);padding:0 0 8px;isolation:isolate}
#webdesign .cleanRefsHeader{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:18px;margin-bottom:22px}
#webdesign .cleanRefsHeader span{display:inline-flex;padding:9px 13px;border-radius:999px;border:1px solid rgba(100,239,255,.16);background:rgba(100,239,255,.055);color:#dffcff;font-size:11px;font-weight:950;letter-spacing:.16em;text-transform:uppercase}
#webdesign .cleanRefsHeader strong{max-width:640px;text-align:right;font-size:clamp(18px,1.55vw,24px);line-height:1.18;letter-spacing:-.03em;color:rgba(255,248,239,.88)}
#webdesign .cleanRefsStage{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
#webdesign .cleanStar{position:absolute;width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.7);box-shadow:0 0 12px rgba(255,255,255,.35);opacity:.65;animation:cleanTwinkle 5s ease-in-out infinite}
#webdesign .cleanStarA{left:12%;top:42%}
#webdesign .cleanStarB{right:18%;top:18%;animation-delay:1.1s}
#webdesign .cleanStarC{left:72%;bottom:16%;animation-delay:2.2s}
@keyframes cleanTwinkle{50%{opacity:1;transform:scale(1.4)}}
#webdesign .cleanNebula{position:absolute;border-radius:50%;filter:blur(38px);opacity:.32}
#webdesign .cleanNebulaA{left:-4%;top:12%;width:220px;height:220px;background:radial-gradient(circle, rgba(100,239,255,.18), rgba(100,239,255,0) 72%)}
#webdesign .cleanNebulaB{right:-2%;bottom:2%;width:240px;height:240px;background:radial-gradient(circle, rgba(127,92,255,.18), rgba(127,92,255,0) 72%)}
#webdesign .cleanRefsGrid{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
#webdesign .cleanRefCard{position:relative;min-height:100%;border-radius:28px;overflow:hidden;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 60px rgba(0,0,0,.26), inset 0 0 0 1px rgba(255,255,255,.02);backdrop-filter:blur(14px);transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
#webdesign .cleanRefCard:hover{transform:translateY(-6px);box-shadow:0 28px 70px rgba(0,0,0,.32),0 0 24px rgba(100,239,255,.08)}
#webdesign .cleanRefGlow{position:absolute;inset:auto auto -48px -34px;width:160px;height:160px;border-radius:50%;filter:blur(24px);opacity:.18;pointer-events:none}
#webdesign .cleanRefCard.tone-cyan .cleanRefGlow{background:radial-gradient(circle, rgba(100,239,255,.72), rgba(100,239,255,0) 70%)}
#webdesign .cleanRefCard.tone-violet .cleanRefGlow{background:radial-gradient(circle, rgba(127,92,255,.68), rgba(127,92,255,0) 70%)}
#webdesign .cleanRefCard.tone-orange .cleanRefGlow{background:radial-gradient(circle, rgba(255,184,107,.62), rgba(255,184,107,0) 70%)}
#webdesign .cleanRefLink{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:14px;min-height:100%;padding:26px 24px 24px;color:#fff8ef;text-decoration:none}
#webdesign .cleanRefLogoWrap{display:flex;align-items:center;justify-content:center;width:100%;min-height:92px;padding:8px 0 2px}
#webdesign .cleanRefLogoWrap img{max-width:min(170px,68%);max-height:50px;width:auto;height:auto;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(0,0,0,.28))}
#webdesign .cleanRefMeta{font-size:11px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:rgba(210,226,242,.68)}
#webdesign .cleanRefCard h3{margin:0;font-size:clamp(24px,2vw,32px);line-height:1.02;letter-spacing:-.03em;color:#fff8ef}
#webdesign .cleanRefCard p{margin:0;color:rgba(255,248,239,.76);line-height:1.7;font-size:15px}
#webdesign .cleanRefCard.tone-cyan{border-color:rgba(100,239,255,.14)}
#webdesign .cleanRefCard.tone-violet{border-color:rgba(127,92,255,.14)}
#webdesign .cleanRefCard.tone-orange{border-color:rgba(255,184,107,.14)}
@media (max-width: 1040px){
 #webdesign .cleanRefsHeader{flex-direction:column;align-items:flex-start}
 #webdesign .cleanRefsHeader strong{text-align:left;max-width:760px}
 #webdesign .cleanRefsGrid{grid-template-columns:1fr;gap:18px}
 #webdesign .cleanRefLogoWrap{min-height:82px}
}


/* v104 Webdesign Referenzen: dunkler Logo Bereich + Buttons */
#webdesign .cleanRefsHeader{justify-content:flex-start!important;margin-bottom:20px!important}
#webdesign .cleanRefsHeader strong{display:none!important}
#webdesign .cleanRefLogoWrap{
  min-height:104px!important;
  border-radius:20px!important;
  background:
    radial-gradient(circle at 50% 28%, rgba(255,255,255,.055), transparent 48%),
    linear-gradient(180deg, rgba(0,0,0,.34), rgba(0,0,0,.48))!important;
  border:1px solid rgba(255,255,255,.055)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.018), inset 0 -26px 42px rgba(0,0,0,.22)!important;
}
#webdesign .cleanRefLogoWrap img{
  max-height:46px!important;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.40)) drop-shadow(0 0 12px rgba(255,255,255,.04))!important;
}
#webdesign .cleanRefButton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:auto;
  padding:12px 16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.10);
  background:linear-gradient(135deg, rgba(100,239,255,.13), rgba(127,92,255,.14), rgba(255,184,107,.12));
  color:#fff8ef;
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  box-shadow:0 14px 32px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.025);
  transition:transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
#webdesign .cleanRefButton::after{content:"↗";font-size:13px;opacity:.86}
#webdesign .cleanRefCard:hover .cleanRefButton{
  transform:translateY(-2px);
  border-color:rgba(100,239,255,.22);
  box-shadow:0 18px 38px rgba(0,0,0,.28),0 0 20px rgba(100,239,255,.08);
}


/* v105 Vertrauen-von Infinite Slider unter Content */
#content .trustOrbitSlider{
  position:relative;
  margin:clamp(22px,4vh,38px) 0 0;
  padding:16px 0 4px;
  overflow:hidden;
  isolation:isolate;
}
#content .trustOrbitSlider::before,
#content .trustOrbitSlider::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:3;
}
#content .trustOrbitSlider::before{
  inset:0;
  background:
    radial-gradient(circle at 18% 50%,rgba(100,239,255,.08),transparent 28%),
    radial-gradient(circle at 86% 50%,rgba(127,92,255,.09),transparent 30%);
  filter:blur(10px);
  opacity:.9;
}
#content .trustOrbitSlider::after{
  left:50%;top:50%;width:4px;height:4px;border-radius:50%;
  background:rgba(255,255,255,.64);
  box-shadow:0 0 18px rgba(255,255,255,.34), -260px -22px 0 rgba(100,239,255,.35), 250px 18px 0 rgba(255,184,107,.28), 80px -30px 0 rgba(127,92,255,.32);
  opacity:.55;
}
#content .trustOrbitHeader{
  position:relative;
  z-index:4;
  display:flex;
  justify-content:center;
  margin-bottom:12px;
}
#content .trustOrbitHeader span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 11px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(5,8,20,.42);
  color:rgba(255,248,239,.70);
  font-size:10px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  backdrop-filter:blur(10px);
}
#content .trustOrbitMask{
  position:relative;
  z-index:4;
  width:100%;
  overflow:hidden;
  border-radius:22px;
  background:linear-gradient(180deg,rgba(7,10,21,.56),rgba(5,8,20,.34));
  border:1px solid rgba(255,255,255,.055);
  box-shadow:0 18px 46px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.018);
  mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%);
}
#content .trustOrbitTrack{
  display:flex;
  align-items:center;
  gap:18px;
  width:max-content;
  padding:14px 18px;
  animation:trustSlideLeft 42s linear infinite;
}
#content .trustOrbitMask:hover .trustOrbitTrack{animation-play-state:paused}
#content .trustLogoItem{
  flex:0 0 auto;
  width:clamp(112px,10vw,150px);
  height:54px;
  display:grid;
  place-items:center;
  padding:10px 16px;
  border-radius:16px;
  background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.14));
  border:1px solid rgba(255,255,255,.055);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.018), 0 0 20px rgba(100,239,255,.025);
}
#content .trustLogoItem img{
  max-width:100%;
  max-height:30px;
  width:auto;
  height:auto;
  object-fit:contain;
  filter:brightness(1.08) drop-shadow(0 8px 14px rgba(0,0,0,.22));
  opacity:.86;
}
#content .trustLogoItem:hover img{opacity:1;filter:brightness(1.22) drop-shadow(0 0 12px rgba(100,239,255,.12))}
@keyframes trustSlideLeft{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
@media(max-width:760px){
  #content .trustOrbitTrack{gap:12px;animation-duration:34s}
  #content .trustLogoItem{width:112px;height:48px;padding:8px 12px}
  #content .trustLogoItem img{max-height:26px}
}


/* v106 Slider nur Logos, ohne Boxen und Effekte */
#content .trustOrbitSlider{
  margin:clamp(18px,3vh,30px) 0 0 !important;
  padding:4px 0 0 !important;
  overflow:hidden !important;
  isolation:auto !important;
}
#content .trustOrbitSlider::before,
#content .trustOrbitSlider::after{
  display:none !important;
  content:none !important;
}
#content .trustOrbitHeader{
  display:none !important;
}
#content .trustOrbitMask{
  z-index:1 !important;
  border-radius:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:hidden !important;
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%) !important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%) !important;
}
#content .trustOrbitTrack{
  gap:clamp(34px,5vw,72px) !important;
  padding:10px 0 !important;
  animation:trustSlideLeft 46s linear infinite !important;
}
#content .trustOrbitMask:hover .trustOrbitTrack{
  animation-play-state:running !important;
}
#content .trustLogoItem{
  width:auto !important;
  height:92px !important;
  padding:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
#content .trustLogoItem img{
  max-width:240px !important;
  max-height:62px !important;
  width:auto !important;
  height:auto !important;
  object-fit:contain !important;
  filter:none !important;
  opacity:1 !important;
}
#content .trustLogoItem:hover img{
  filter:none !important;
  opacity:1 !important;
}
@media(max-width:760px){
  #content .trustOrbitTrack{gap:32px !important;animation-duration:38s !important}
  #content .trustLogoItem{height:74px !important}
  #content .trustLogoItem img{max-width:180px !important;max-height:48px !important}
}


/* V19: only portfolio section alignment fixes */.cleanCases{
  min-height:760px!important;
}.cleanIntro{
  top:clamp(84px,10vh,118px)!important;
  left:var(--pad)!important;
  max-width:min(620px,44vw)!important;
  z-index:9!important;
}.cleanIntro.kicker{
  margin-bottom:8px;
}.cleanIntro h2{
  font-size:clamp(30px,3vw,46px)!important;
  line-height:.95!important;
  max-width:620px!important;
  letter-spacing:-.045em!important;
}.cleanInfo{
  left:var(--pad)!important;
  bottom:clamp(150px,20vh,190px)!important;
  width:min(570px,44vw)!important;
  z-index:10!important;
}.cleanInfo small{
  padding:8px 12px!important;
  font-size:12px!important;
}.cleanInfo h2{
  margin:14px 0 12px!important;
  font-size:clamp(36px,4.25vw,62px)!important;
  line-height:.9!important;
  max-width:570px!important;
  letter-spacing:-.055em!important;
}.cleanInfo p{
  max-width:540px!important;
  font-size:clamp(15px,1.1vw,17px)!important;
  line-height:1.58!important;
}.cleanKpis{
  margin-top:20px!important;
  max-width:420px!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
}.cleanKpis.kpi{
  padding:13px 15px!important;
  border-radius:16px!important;
}.cleanKpis.kpi b{
  font-size:18px!important;
}.cleanRail{
  left:auto!important;
  right:var(--pad)!important;
  bottom:30px!important;
  width:min(820px,54vw)!important;
  grid-template-columns:repeat(4,minmax(0,1fr))!important;
  gap:12px!important;
  z-index:12!important;
}.cleanRail.netflixCard{
  min-height:118px!important;
  border-radius:16px!important;
  box-shadow:0 14px 44px rgba(0,0,0,.42)!important;
}.cleanRail.netflixMeta{
  left:12px!important;
  right:12px!important;
  bottom:10px!important;
  gap:2px!important;
}.cleanRail.netflixMeta strong{
  font-size:13px!important;
  line-height:1.05!important;
}.cleanRail.netflixMeta span{
  font-size:10px!important;
  line-height:1.2!important;
}.cleanRail.netflixCard:hover,.cleanRail.netflixCard.active{
  transform:translateY(-5px)!important;
}.netflixHero.caseImage:after{
  background:
    linear-gradient(90deg,rgba(5,5,5,.82) 0%,rgba(5,5,5,.50) 28%,rgba(5,5,5,.12) 58%,rgba(5,5,5,.34) 100%),
    linear-gradient(180deg,rgba(5,5,5,.16),rgba(5,5,5,.48) 75%,#050505 100%)!important;
}
@media(max-width:1180px){.cleanIntro{max-width:58vw!important}.cleanInfo{width:min(560px,56vw)!important}.cleanRail{width:min(760px,62vw)!important}
}
@media(max-width:980px){.cleanIntro{max-width:none!important;top:auto!important;left:auto!important}.cleanInfo{width:auto!important;bottom:auto!important;left:auto!important}.cleanRail{width:auto!important;right:auto!important;bottom:auto!important}.cleanRail.netflixCard{min-height:130px!important}
}


/* v40 case thumbs transparent + hover brand */
#caseDots.cleanRail{align-items:end}
#caseDots .netflixCard,
#portfolio #caseDots .netflixCard,
.cleanRail .netflixCard{
  padding:0 !important;
  background:transparent !important;
  border:0 !important;
  outline:none !important;
  box-shadow:none !important;
  border-radius:0 !important;
  overflow:visible !important;
}
#caseDots .netflixCard::before,
#caseDots .netflixCard::after{display:none !important}
#caseDots .netflixCard img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:0 !important;
  border:0 !important;
  outline:none !important;
  box-shadow:none !important;
  filter:saturate(.92) brightness(.88);
  transition:transform .28s ease, filter .28s ease, opacity .28s ease;
}
#caseDots .netflixCard .caseBrandLabel{
  position:absolute;
  left:14px;
  right:14px;
  bottom:14px;
  z-index:3;
  color:#fff8ef;
  font-weight:900;
  font-size:18px;
  letter-spacing:.08em;
  text-transform:uppercase;
  opacity:0;
  transform:translateY(10px);
  text-shadow:0 10px 24px rgba(0,0,0,.55);
  transition:opacity .25s ease, transform .25s ease;
  pointer-events:none;
}
#caseDots .netflixCard:hover,
#caseDots .netflixCard.active{
  transform:translateY(-6px) scale(1.02) !important;
  box-shadow:none !important;
}
#caseDots .netflixCard:hover img,
#caseDots .netflixCard.active img{
  transform:scale(1.02);
  filter:saturate(1.02) brightness(.98);
}
#caseDots .netflixCard:hover .caseBrandLabel,
#caseDots .netflixCard.active .caseBrandLabel{
  opacity:1;
  transform:translateY(0);
}
#caseDots .netflixCard:hover img,
#caseDots .netflixCard.active img{
  box-shadow:0 18px 40px rgba(0,0,0,.32);
}


/* v41 brand logo only on mouse hover */
#caseDots .netflixCard .caseBrandLabel{display:none !important}
#caseDots .netflixCard .caseBrandLogo{
  position:absolute;
  inset:0;
  z-index:4;
  display:grid;
  place-items:center;
  opacity:0;
  transform:scale(.96);
  pointer-events:none;
  transition:opacity .24s ease, transform .24s ease;
  background:linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.42));
}
#caseDots .netflixCard .caseLogoText{
  color:#fff8ef;
  font-weight:950;
  font-size:clamp(18px,1.55vw,30px);
  line-height:1;
  letter-spacing:.13em;
  text-transform:uppercase;
  padding:12px 18px;
  border-radius:999px;
  background:rgba(5,5,5,.34);
  box-shadow:0 16px 40px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.10);
  backdrop-filter:blur(8px);
  text-shadow:0 8px 22px rgba(0,0,0,.55);
}
#caseDots .netflixCard:hover .caseBrandLogo{
  opacity:1;
  transform:scale(1);
}
#caseDots .netflixCard.active .caseBrandLogo{
  opacity:0 !important;
  transform:scale(.96) !important;
}
#caseDots .netflixCard.active:hover .caseBrandLogo{
  opacity:1 !important;
  transform:scale(1) !important;
}
#caseDots .netflixCard.active .caseBrandLabel,
#caseDots .netflixCard.active:hover .caseBrandLabel{display:none !important;opacity:0 !important}


/* v42 real case logos on hover only */
#caseDots .netflixCard .caseBrandLabel,
#caseDots .netflixCard .caseLogoText,
#caseDots .netflixCard > span:not(.caseLogoHover){display:none !important}
#caseDots .netflixCard .caseLogoHover{
  position:absolute;
  inset:0;
  z-index:5;
  display:grid;
  place-items:center;
  opacity:0;
  transform:scale(.96);
  background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.54));
  transition:opacity .24s ease, transform .24s ease;
  pointer-events:none;
}
#caseDots .netflixCard .caseLogoHover::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(0,0,0,.18),transparent 56%)}
#caseDots .netflixCard .caseLogoImg{
  position:relative !important;
  z-index:2;
  width:min(58%,210px) !important;
  height:auto !important;
  max-height:54% !important;
  object-fit:contain !important;
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  filter:drop-shadow(0 12px 26px rgba(0,0,0,.45)) brightness(1.08) !important;
  transform:none !important;
}
#caseDots .netflixCard:hover .caseLogoHover{
  opacity:1;
  transform:scale(1);
}
#caseDots .netflixCard.active .caseLogoHover{opacity:0 !important}
#caseDots .netflixCard.active:hover .caseLogoHover{opacity:1 !important}


/* v43 contact update */
.contactPanelWrap{padding:clamp(26px,4vw,40px)}
.contactContentGrid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.75fr);gap:28px;align-items:stretch;width:100%}
.contactIntro h2{margin:14px 0 14px;font-size:clamp(38px,5vw,68px);line-height:.94;letter-spacing:-.045em;text-transform:uppercase}
.contactIntro p{max-width:700px;color:var(--muted);font-size:18px;line-height:1.7}
.contactCards{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px;max-width:860px}
.contactCard{position:relative;display:grid;grid-template-columns:56px 1fr;grid-template-areas:"icon label" "icon value";gap:6px 14px;align-items:center;padding:20px 22px;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));border:1px solid rgba(255,184,107,.16);box-shadow:0 20px 50px rgba(0,0,0,.24);text-decoration:none;color:#fff8ef;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.contactCard:hover{transform:translateY(-4px);border-color:rgba(255,184,107,.38);box-shadow:0 26px 65px rgba(0,0,0,.34),0 0 24px rgba(255,184,107,.12)}
.contactIcon{grid-area:icon;width:56px;height:56px;border-radius:18px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(231,119,58,.22),rgba(255,184,107,.10));color:var(--sun);box-shadow:inset 0 0 0 1px rgba(255,184,107,.18)}
.contactIcon svg{width:24px;height:24px}
.contactLabel{grid-area:label;font-size:12px;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:#f1b96d}
.contactCard strong{grid-area:value;font-size:clamp(18px,2vw,24px);line-height:1.2;word-break:break-word}
.openStateCard{position:relative;padding:24px;border-radius:28px;border:1px solid rgba(255,184,107,.16);background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));box-shadow:0 28px 80px rgba(0,0,0,.32);display:flex;flex-direction:column;justify-content:space-between;min-height:240px;overflow:hidden}
.openStateCard:before{content:"";position:absolute;inset:auto -10% -30% auto;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(255,184,107,.18),transparent 64%);filter:blur(20px)}
.openStateTop{position:relative;display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-top:18px}
.openStateTop small{display:block;color:var(--muted);font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}
.openStateTop h3{margin:0;font-size:clamp(30px,4vw,54px);line-height:.94;letter-spacing:-.04em;text-transform:uppercase}
.openBadge{position:relative;display:inline-flex;align-items:center;gap:10px;padding:12px 16px;border-radius:999px;background:rgba(8,14,24,.62);backdrop-filter:blur(10px);border:1px solid rgba(255,184,107,.18);font-weight:900;text-transform:uppercase;letter-spacing:.09em;font-size:13px;color:#fff8ef;box-shadow:0 0 0 0 rgba(255,184,107,.25)}
.openBadge.is-open{animation:openPulse 2.4s ease-in-out infinite}
.statusDot{width:10px;height:10px;border-radius:50%;background:#7bffb0;box-shadow:0 0 18px rgba(123,255,176,.7);animation:dotPulse 1.8s ease-in-out infinite}
.openBadge.is-closed .statusDot{background:#ff8a7a;box-shadow:0 0 18px rgba(255,138,122,.62)}
#openHint{position:relative;margin:22px 0 0;color:rgba(255,248,239,.74);font-size:16px;line-height:1.65;max-width:440px}
@keyframes openPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,184,107,.08)}50%{box-shadow:0 0 0 12px rgba(255,184,107,0)}}
@keyframes dotPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.3);opacity:.8}}
@media(max-width:980px){
  .contactContentGrid{grid-template-columns:1fr}
  .contactCards{grid-template-columns:1fr}
  .openStateTop{flex-direction:column;align-items:flex-start}
}


/* v44 contact status under weekday */
.openStateTop{display:block !important;margin-top:18px !important}
.openStateTop > div:first-child{display:grid;gap:10px;align-items:start}
.openStateTop h3{margin:0 !important}
.openBadge{width:max-content;margin-top:4px;align-self:start}
#openHint{margin-top:28px !important;font-size:17px;line-height:1.7;color:rgba(255,248,239,.78)}


/* v45 contact layout: availability under contact cards */
#kontakt .contactContentGrid{
  grid-template-columns:1fr !important;
  max-width:1120px;
  margin:0 auto;
}
#kontakt .contactIntro{width:100%}
#kontakt .contactIntro p{max-width:840px}
#kontakt .contactCards{
  max-width:none !important;
  width:100%;
  grid-template-columns:repeat(2,minmax(360px,1fr)) !important;
  gap:18px !important;
}
#kontakt .contactCard{
  grid-template-columns:62px minmax(0,1fr) !important;
  padding:22px 24px !important;
}
#kontakt .contactCard strong{
  font-size:clamp(20px,1.9vw,26px) !important;
  white-space:nowrap;
  word-break:normal !important;
}
#kontakt .openStateCard{
  margin-top:18px;
  max-width:none;
  min-height:auto !important;
  padding:22px 24px !important;
}
#kontakt .openStateTop{
  margin-top:14px !important;
}
#kontakt .openStateTop > div:first-child{
  display:grid !important;
  gap:8px !important;
}
#kontakt .openBadge{
  margin-top:0 !important;
  width:max-content;
}
#kontakt #openHint{
  margin-top:18px !important;
  max-width:780px !important;
}
@media(max-width:900px){
  #kontakt .contactCards{grid-template-columns:1fr !important}
  #kontakt .contactCard strong{white-space:normal}
}


/* v46 social media beside availability */
#kontakt .availabilitySocialGrid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(340px,.82fr);
  gap:18px;
  margin-top:18px;
  align-items:stretch;
}
#kontakt .openStateCard{margin-top:0 !important;min-height:260px}
.contactSocialCard{
  position:relative;
  padding:24px;
  border-radius:28px;
  border:1px solid rgba(255,184,107,.16);
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.03));
  box-shadow:0 28px 80px rgba(0,0,0,.30);
  overflow:hidden;
}
.contactSocialCard:before{content:"";position:absolute;inset:-30% -20% auto auto;width:260px;height:260px;border-radius:50%;background:radial-gradient(circle,rgba(127,92,255,.18),transparent 65%);filter:blur(24px)}
.contactSocialCard h3{position:relative;margin:18px 0 8px;font-size:clamp(28px,3vw,42px);line-height:.95;letter-spacing:-.04em;text-transform:uppercase}
.contactSocialCard p{position:relative;margin:0 0 18px;color:rgba(255,248,239,.72);line-height:1.55;max-width:380px}
.socialChannelGrid{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.socialChannel{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:18px;border:1px solid rgba(255,255,255,.10);background:rgba(0,0,0,.18);color:#fff8ef;text-decoration:none;font-weight:900;transition:transform .24s ease,border-color .24s ease,background .24s ease,box-shadow .24s ease}
.socialChannel:hover{transform:translateY(-3px);border-color:rgba(255,184,107,.36);background:rgba(255,255,255,.06);box-shadow:0 18px 44px rgba(0,0,0,.28),0 0 20px rgba(255,184,107,.10)}
.socialIcon{width:40px;height:40px;border-radius:14px;display:grid;place-items:center;color:var(--sun);background:linear-gradient(135deg,rgba(231,119,58,.22),rgba(127,92,255,.10));box-shadow:inset 0 0 0 1px rgba(255,184,107,.14);flex:0 0 auto}
.socialIcon svg{width:20px;height:20px;display:block}
.socialChannel strong{font-size:15px;letter-spacing:.02em}
@media(max-width:980px){#kontakt .availabilitySocialGrid{grid-template-columns:1fr}.socialChannelGrid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.socialChannelGrid{grid-template-columns:1fr}.contactSocialCard,.openStateCard{padding:20px}}


/* v47 social media unter Kontakt */
#kontakt .availabilitySocialGrid{
  display:block !important;
  margin-top:22px !important;
  max-width:860px !important;
}
#kontakt .openStateCard{
  width:100% !important;
  min-height:0 !important;
}
#kontakt .contactSocialCard.contactSocialUnder{
  margin-top:18px !important;
  max-width:860px !important;
  width:100% !important;
  padding:22px !important;
  border-radius:28px !important;
  border:1px solid rgba(255,184,107,.14) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025)) !important;
  box-shadow:0 24px 70px rgba(0,0,0,.28) !important;
}
#kontakt .contactSocialCard.contactSocialUnder h3{
  margin:12px 0 8px !important;
  font-size:clamp(26px,3vw,42px) !important;
  line-height:1 !important;
  letter-spacing:-.04em !important;
  text-transform:uppercase !important;
}
#kontakt .contactSocialCard.contactSocialUnder p{
  color:var(--muted) !important;
  margin:0 0 18px !important;
  line-height:1.55 !important;
}
#kontakt .contactSocialCard.contactSocialUnder .socialChannelGrid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:12px !important;
}
#kontakt .contactSocialCard.contactSocialUnder .socialChannel{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  min-height:54px !important;
  padding:12px 14px !important;
  border-radius:18px !important;
  border:1px solid rgba(255,255,255,.09) !important;
  background:rgba(255,255,255,.035) !important;
  color:#fff8ef !important;
  transition:transform .25s ease,border-color .25s ease,background .25s ease !important;
}
#kontakt .contactSocialCard.contactSocialUnder .socialChannel:hover{
  transform:translateY(-3px) !important;
  border-color:rgba(255,184,107,.32) !important;
  background:rgba(255,184,107,.065) !important;
}
#kontakt .contactSocialCard.contactSocialUnder .socialIcon{
  width:34px !important;
  height:34px !important;
  border-radius:12px !important;
  display:grid !important;
  place-items:center !important;
  color:var(--sun) !important;
  background:rgba(255,184,107,.09) !important;
}
#kontakt .contactSocialCard.contactSocialUnder .socialIcon svg{
  width:18px !important;
  height:18px !important;
}
#kontakt .contactSocialCard.contactSocialUnder .socialChannel strong{
  font-size:14px !important;
  letter-spacing:.06em !important;
  text-transform:uppercase !important;
}
@media(max-width:980px){
  #kontakt .contactSocialCard.contactSocialUnder .socialChannelGrid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
}
@media(max-width:560px){
  #kontakt .contactSocialCard.contactSocialUnder .socialChannelGrid{grid-template-columns:1fr !important;}
}


/* v48 social own section + availability no box */
.availabilitySocialGrid{margin-top:26px;max-width:860px}
.openStateCard{
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  min-height:auto !important;
  overflow:visible !important;
}
.openStateCard:before{display:none !important}
.openStateTop{margin-top:10px !important}
#openHint{max-width:560px}
.socialStandalone{padding-top:0}
.socialStandalone .wrap{position:relative}
.socialStandalonePanel{
  position:relative;
  border-radius:30px;
  padding:28px 30px 30px;
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.08);
  box-shadow:var(--shadow);
  overflow:hidden;
}
.socialStandalonePanel:before{content:"";position:absolute;inset:auto -10% -30% auto;width:300px;height:300px;border-radius:50%;background:radial-gradient(circle,rgba(127,92,255,.14),transparent 65%);filter:blur(18px)}
.socialStandalonePanel h3{margin:12px 0 10px;font-size:clamp(28px,3vw,44px);letter-spacing:-.04em;text-transform:uppercase}
.socialStandalonePanel p{margin:0 0 20px;color:var(--muted);max-width:640px;line-height:1.7}
.socialChannelGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.socialChannel{position:relative;display:grid;justify-items:start;gap:12px;padding:18px 18px 20px;border-radius:22px;text-decoration:none;color:#fff8ef;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.08);transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.socialChannel:hover{transform:translateY(-4px);border-color:rgba(255,184,107,.3);box-shadow:0 20px 50px rgba(0,0,0,.24)}
.socialIcon{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,rgba(231,119,58,.22),rgba(255,184,107,.10));color:var(--sun);box-shadow:inset 0 0 0 1px rgba(255,184,107,.18)}
.socialIcon svg{width:20px;height:20px}
.socialChannel strong{font-size:18px;line-height:1.2}
@media(max-width:980px){.socialChannelGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.socialChannelGrid{grid-template-columns:1fr}.socialStandalonePanel{padding:22px}}


/* v51 contact scroll focus corrected */
#kontakt.contactFocusScroll{
  min-height:132vh !important;
  padding:0 !important;
  background:#050505 !important;
}
#kontakt.contactFocusScroll > .wrap{
  position:sticky !important;
  top:0 !important;
  height:100vh !important;
  min-height:100vh !important;
  display:grid !important;
  align-items:center !important;
  padding:clamp(64px,7vh,86px) 0 clamp(18px,3vh,34px) !important;
}
#kontakt.contactFocusScroll .launchPanel.contactPanelWrap{
  width:var(--contactW, min(1160px, calc(100vw - 54px))) !important;
  height:var(--contactH, auto) !important;
  min-height:0 !important;
  max-height:calc(100vh - 106px) !important;
  margin-inline:auto !important;
  transform:scale(var(--contactScale, .94)) !important;
  border-radius:var(--contactR, 32px) !important;
  overflow:hidden !important;
  display:grid !important;
  align-items:center !important;
}
#kontakt.contactFocusScroll .contactContentGrid{
  min-height:0 !important;
  height:auto !important;
  align-items:center !important;
}
#kontakt.contactFocusScroll .contactIntro h2{font-size:clamp(34px,4.4vw,58px) !important}
#kontakt.contactFocusScroll .contactIntro p{font-size:clamp(16px,1.2vw,18px) !important;line-height:1.55 !important}
#kontakt.contactFocusScroll .contactCards{margin-top:20px !important}
#kontakt.contactFocusScroll .availabilitySocialGrid{margin-top:22px !important}
#kontakt.contactFocusScroll + .socialStandalone{margin-top:clamp(32px,7vh,70px) !important;padding-top:0 !important}
@media(max-width:980px){
  #kontakt.contactFocusScroll{min-height:138vh !important}
  #kontakt.contactFocusScroll > .wrap{padding:76px 0 24px !important}
  #kontakt.contactFocusScroll .launchPanel.contactPanelWrap{max-height:calc(100vh - 102px) !important;overflow:auto !important}
}


/* v52 contact normal, no fullscreen focus */
#kontakt,
#kontakt.contactFocusScroll{
  position:relative !important;
  min-height:auto !important;
  height:auto !important;
  padding-top:clamp(64px,8vh,96px) !important;
  padding-bottom:clamp(20px,3vh,36px) !important;
  background:#050505 !important;
  isolation:isolate !important;
}
#kontakt > .wrap,
#kontakt.contactFocusScroll > .wrap{
  position:relative !important;
  top:auto !important;
  height:auto !important;
  min-height:0 !important;
  display:block !important;
  align-items:initial !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
}
#kontakt .launchPanel.contactPanelWrap,
#kontakt.contactFocusScroll .launchPanel.contactPanelWrap{
  width:auto !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  margin-inline:0 !important;
  transform:none !important;
  border-radius:34px !important;
  overflow:hidden !important;
  display:block !important;
  align-items:initial !important;
  box-shadow:var(--shadow) !important;
}
#kontakt.contactFocusScroll:before,
#kontakt:before{
  opacity:0 !important;
  display:none !important;
}
#kontakt .contactContentGrid,
#kontakt.contactFocusScroll .contactContentGrid{
  min-height:0 !important;
  height:auto !important;
  align-items:start !important;
}
#kontakt + .socialStandalone{
  margin-top:0 !important;
  padding-top:clamp(20px,3vh,36px) !important;
}


/* v55 social mini buttons under availability */
.socialStandalone{display:none !important}
#kontakt .availabilitySocialGrid{margin-bottom:0 !important}
#kontakt .socialMiniGrid{
  margin-top:20px !important;
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
  align-items:center !important;
  max-width:760px !important;
}
#kontakt .socialMiniKicker{
  width:100% !important;
  display:block !important;
  color:var(--sun) !important;
  font-weight:950 !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
  font-size:12px !important;
  margin-bottom:2px !important;
}
#kontakt .socialMiniButton{
  min-height:44px !important;
  padding:8px 12px 8px 8px !important;
  border-radius:999px !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:9px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.025)) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:0 12px 32px rgba(0,0,0,.20) !important;
  color:#fff8ef !important;
  text-decoration:none !important;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease !important;
}
#kontakt .socialMiniButton:hover{
  transform:translateY(-3px) !important;
  border-color:rgba(255,184,107,.34) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.035)) !important;
  box-shadow:0 18px 44px rgba(0,0,0,.28),0 0 22px rgba(255,184,107,.08) !important;
}
#kontakt .socialMiniButton .socialIcon{
  width:28px !important;
  height:28px !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  background:linear-gradient(135deg,rgba(231,119,58,.28),rgba(255,184,107,.13)) !important;
  color:var(--sun) !important;
  box-shadow:inset 0 0 0 1px rgba(255,184,107,.18) !important;
}
#kontakt .socialMiniButton .socialIcon svg{width:13px !important;height:13px !important}
#kontakt .socialMiniButton strong{font-size:13px !important;line-height:1 !important;letter-spacing:.02em !important}
@media(max-width:760px){
  #kontakt .socialMiniGrid{gap:8px !important}
  #kontakt .socialMiniButton{min-height:40px !important;padding:7px 10px 7px 7px !important}
}


/* v56 availability removed */
#kontakt .availabilitySocialGrid:empty{display:none !important}
#kontakt .contactSocialMiniWrap,
#kontakt .availabilitySocialGrid{
  margin-top:20px !important;
  max-width:860px !important;
}
#kontakt .openStateCard,
#kontakt #openStateCard{display:none !important}


/* v58 small social icons inside menu */
.menuSocialMini{
  position:absolute;
  right:clamp(24px,5vw,72px);
  bottom:clamp(28px,6vh,64px);
  z-index:3;
  display:flex;
  align-items:center;
  gap:10px;
}
.menuSocialMini a{
  width:44px;
  height:44px;
  border-radius:999px;
  display:grid;
  place-items:center;
  color:var(--sun);
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,184,107,.18);
  box-shadow:0 14px 36px rgba(0,0,0,.24),inset 0 0 0 1px rgba(255,255,255,.025);
  backdrop-filter:blur(12px);
  transition:transform .24s ease,border-color .24s ease,background .24s ease,box-shadow .24s ease;
}
.menuSocialMini a:hover{
  transform:translateY(-4px) scale(1.04);
  border-color:rgba(255,184,107,.36);
  background:rgba(255,184,107,.10);
  box-shadow:0 20px 48px rgba(0,0,0,.32),0 0 24px rgba(255,184,107,.10);
}
.menuSocialMini svg{width:18px;height:18px;display:block}
@media(max-width:760px){
  .menuSocialMini{right:auto;left:var(--pad);bottom:28px}
  .menuSocialMini a{width:40px;height:40px}
}


/* v65 restored intro text once */
.webdesignIntroText.restoredOnce{
  margin:14px 0 24px !important;
  max-width:720px !important;
  color:var(--muted) !important;
  font-size:clamp(16px,1.25vw,18px) !important;
  line-height:1.7 !important;
}


/* v67 EREN role correction */
#webdesign .webRefCopy span{
  display:block;
}


/* v78 sound control next to burger */
.headerActions{display:flex;align-items:center;gap:12px;margin-left:auto;position:relative;z-index:3}
.header .soundHeaderControl{
  position:relative !important;
  right:auto !important;
  bottom:auto !important;
  z-index:3 !important;
  display:flex !important;
  align-items:center !important;
  justify-items:center !important;
  gap:8px !important;
}
.header .soundHeaderControl .soundToggle{
  width:46px !important;
  height:46px !important;
  position:relative !important;
  right:auto !important;
  bottom:auto !important;
  border-color:rgba(255,184,107,.22) !important;
  background:rgba(255,255,255,.055) !important;
  backdrop-filter:blur(12px) !important;
  box-shadow:none !important;
}
.header .soundHeaderControl .soundToggle:hover{
  transform:scale(1.04) !important;
  background:rgba(255,255,255,.10) !important;
  border-color:rgba(255,184,107,.38) !important;
  box-shadow:0 0 24px rgba(255,184,107,.10) !important;
}
.header .soundHeaderControl .soundVolumePanel{
  right:0 !important;
  bottom:auto !important;
  top:58px !important;
  transform:translateY(-6px) scale(.96) !important;
}
.header .soundHeaderControl:hover .soundVolumePanel,
.header .soundHeaderControl:focus-within .soundVolumePanel{
  opacity:1 !important;
  transform:translateY(0) scale(1) !important;
  pointer-events:auto !important;
}
@media(max-width:640px){.headerActions{gap:8px}.header .soundHeaderControl .soundToggle{width:44px !important;height:44px !important}.header .soundHeaderControl .soundVolumePanel{right:-54px !important}}


/* v89: Weltraumstaub dezenter */
.spaceDustLayer{opacity:.42 !important;filter:saturate(.85) brightness(.82) !important;mix-blend-mode:screen !important;transition:opacity .65s ease !important}
.spaceDust{box-shadow:0 0 calc(var(--s,5px) * 1.35) var(--g,rgba(255,248,239,.10)) !important;background:radial-gradient(circle at 35% 35%,rgba(255,255,255,.62) 0 8%, var(--c,rgba(255,248,239,.42)) 32%, rgba(255,248,239,0) 70%) !important}
.spaceDust.is-near{opacity:.38 !important}.spaceDust.is-far{opacity:.18 !important}
.spaceDustNebula{opacity:.045 !important;filter:blur(34px) saturate(.75) !important}
@keyframes spaceDustFloat{
  0%{opacity:.04;transform:translate3d(0,0,0) scale(var(--sc,.75))}
  20%{opacity:calc(var(--op,.45) * .34)}
  50%{transform:translate3d(var(--mx,18px),var(--my,-24px),0) scale(calc(var(--sc,.75) + .08))}
  100%{opacity:calc(var(--op,.45) * .22);transform:translate3d(var(--tx,-36px),var(--ty,28px),0) scale(calc(var(--sc,.75) + .14))}
}