@charset "UTF-8";
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:400 700;font-display:swap;src:url('./fonts/space-grotesk-latin-variable.woff2') format('woff2')}

:root{color-scheme:dark;--bg:#111211;--panel:#191b19;--text:#eeeee6;--muted:#a5a8a1;--line:#333630;--accent:#c9e6b0;--text-secondary:var(--muted);--text-tertiary:var(--muted);--gray-800:var(--text);--gray-400:var(--muted)}
*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;scroll-padding-top:100px}body{background:var(--bg);color:var(--text);font-family:'Space Grotesk',Arial,Helvetica,sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased}::selection{background:var(--accent);color:var(--bg)}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button,a,input,textarea{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:6px}button[hidden]{display:none!important}.skip-link{position:fixed;top:-100px;z-index:99;background:var(--accent);color:var(--bg);padding:12px}.skip-link:focus{top:8px}
nav{position:fixed;inset:0 0 auto;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 4.5%;border-bottom:1px solid #ffffff12;background:#111211eb;backdrop-filter:blur(16px)}.nav-logo{font-size:30px;letter-spacing:-2px;font-weight:800;white-space:nowrap}.nav-logo-tagline{font-size:10px;text-transform:uppercase;letter-spacing:1.5px;font-weight:400;margin-left:18px;color:var(--muted)}.nav-logo-coffee{display:none}.nav-right,.nav-links{display:flex;align-items:center;gap:28px}.nav-links{list-style:none;font-size:12px}.nav-links a{transition:color .2s}.nav-links a:hover{color:var(--accent)}.lang-toggle{display:flex;gap:2px;border:1px solid var(--line);padding:3px;border-radius:30px}.lang-toggle button{color:var(--muted);background:transparent;border:0;border-radius:20px;padding:4px 7px;font-size:10px}.lang-toggle .active{background:var(--text);color:var(--bg)}.hamburger{display:none;background:transparent;border:0;padding:8px}.hamburger span{display:block;width:22px;height:1px;background:var(--text);margin:5px}
.hero{max-width:1600px;margin:auto;position:relative;display:grid;grid-template-columns:1.05fr 1fr;align-items:center;min-height:min(870px,100svh);padding:130px 5% 100px;overflow:hidden}.hero-coordinate{position:absolute;top:120px;right:5%;font-family:monospace;font-size:10px;color:var(--muted);letter-spacing:1px}.hero-content{z-index:2;position:relative;padding:45px 0;pointer-events:none}.hero-content a{pointer-events:auto}.hero-label,.section-label{font-family:monospace;text-transform:uppercase;font-size:10px;letter-spacing:2.4px;display:block;color:var(--accent);margin-bottom:28px}.hero-label:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);display:inline-block;vertical-align:middle;margin-right:12px;box-shadow:0 0 15px #c9e6b080}h1{font-size:clamp(55px,6.8vw,110px);font-weight:400;line-height:1.02;letter-spacing:-.075em;max-width:760px}h1>span{display:block}.gradient-text{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;letter-spacing:-.065em;color:var(--accent);font-size:.94em}.hero p{font-size:15px;color:var(--muted);max-width:390px;line-height:1.8;margin:30px 0}.hero-buttons{display:flex;gap:24px;align-items:center;flex-wrap:wrap}.btn-primary,.submit-btn{display:inline-flex;align-items:center;justify-content:center;background:var(--accent);color:#182014;border:1px solid var(--accent);padding:13px 23px;border-radius:3px;font-size:12px;font-weight:600;transition:background .2s,transform .2s}.btn-primary:hover,.submit-btn:hover{background:#e2f5d3;transform:translateY(-2px)}.btn-secondary{font-size:12px;border-bottom:1px solid #686c60;padding:10px 0}.hero-bottom{position:absolute;bottom:30px;left:5%;right:5%;display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding-top:20px;color:var(--muted);font-size:10px;letter-spacing:.3px}.hero-bottom a{color:var(--text)}
.sculpture-stage{height:550px;position:relative;margin:20px -35px 0 -40px}.sculpture-stage canvas,.sculpture-fallback{position:absolute;inset:0;width:100%;height:100%;z-index:2}.sculpture-stage canvas{opacity:0;transition:opacity .5s}.sculpture-stage.ready canvas{opacity:1}.sculpture-stage.ready .sculpture-fallback{visibility:hidden}.sculpture-halo{position:absolute;inset:8% -5% 0;background:radial-gradient(ellipse,#788e6b19,transparent 65%);border-radius:50%}.sculpture-shadow{position:absolute;bottom:63px;left:20%;right:20%;height:20px;background:#0008;filter:blur(12px);border-radius:50%;z-index:1}.object-caption{position:absolute;left:9%;right:9%;bottom:35px;display:flex;justify-content:space-between;font:9px monospace;letter-spacing:1px;color:var(--muted);z-index:3}.object-controls{position:absolute;bottom:-8px;left:9%;right:9%;display:flex;justify-content:space-between;gap:10px;z-index:4}.object-controls button{border:1px solid var(--line);border-radius:30px;background:#111211a0;color:var(--text);font-size:10px;padding:8px 13px}.object-controls button:hover{border-color:var(--accent)}
section:not(.hero){padding:85px 5%;scroll-margin-top:0}.section-inner{max-width:1320px;margin:auto}.section-label{margin-bottom:20px}.section-title{font-size:clamp(36px,4.2vw,64px);font-weight:400;letter-spacing:-.055em;line-height:1.08;max-width:850px;margin-bottom:24px}.section-subtitle{color:var(--muted);max-width:620px!important;font-size:14px;margin-bottom:40px}#portfolio{background:#e9eae2;color:#20251e}#portfolio .section-label{color:#59664b}#portfolio .section-subtitle{color:#60655c}.portfolio-group-title{font:10px monospace;text-transform:uppercase;letter-spacing:2px;border-top:1px solid #c8cbbf;padding:20px 0;margin-top:25px}.portfolio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}.portfolio-card{display:block;min-width:0}.project-visual{background:#d6d8cc;height:230px;overflow:hidden;display:flex;align-items:flex-start;justify-content:center;padding:24px 22px 0;perspective:800px;margin-bottom:18px;border-radius:4px;transition:background .35s}.project-visual img{display:block;width:100%;height:auto;object-fit:cover;object-position:top;box-shadow:0 10px 25px #20251e20;transform:rotateX(7deg) rotateY(-7deg) rotateZ(-3deg) translateY(12px);transition:transform .55s cubic-bezier(.2,.7,.2,1)}.portfolio-card:hover .project-visual img{transform:rotateX(0) rotateY(0) rotateZ(0) translateY(0)}.portfolio-card:nth-child(2) .project-visual{background:#d7d3cf}.portfolio-card:nth-child(3) .project-visual{background:#cfd9cc}.portfolio-card h3{font-size:19px;letter-spacing:-.6px;font-weight:500;margin-bottom:8px}.portfolio-card p{font-size:12px;color:#62675c;max-width:450px;line-height:1.7}.portfolio-card-link{display:inline-block;font:10px monospace;margin-top:16px;border-bottom:1px solid #a4aa99;padding-bottom:5px}.portfolio-grid:has(.markum-visual){grid-template-columns:1fr}.portfolio-card:has(.markum-visual){display:grid;grid-template-columns:1.5fr 1fr;column-gap:45px;align-content:center}.markum-visual{grid-row:1/5;height:300px;margin:0;background:#c8d0c3;padding:25px 40px 0}.markum-visual img{transform:rotateY(-8deg) rotateZ(-3deg);width:90%}.portfolio-card:has(.markum-visual) h3{align-self:end;font-size:32px}.portfolio-card:has(.markum-visual) p{align-self:center}
#tjanster{border-bottom:1px solid var(--line)}.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 35px}.service-card{position:relative;border-top:1px solid var(--line);padding:24px 0 30px}.service-icon{color:var(--accent);font:11px monospace;position:absolute;right:5px;top:28px}.service-card h3{font-size:19px;font-weight:400;margin-bottom:12px;letter-spacing:-.6px}.service-card p{font-size:13px;color:var(--muted);max-width:340px}.service-card:nth-child(1) .service-icon:before{content:'01'}.service-card:nth-child(2) .service-icon:before{content:'02'}.service-card:nth-child(3) .service-icon:before{content:'03'}.service-card:nth-child(4) .service-icon:before{content:'04'}.service-card:nth-child(5) .service-icon:before{content:'05'}.service-card:nth-child(6) .service-icon:before{content:'06'}.service-icon{font-size:0}.service-icon:before{font-size:10px}
#ai-utbildning{background:radial-gradient(ellipse at 90% 0,#35463150,transparent 60%),#191c18}.ai-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:30px}.ai-card{border-top:1px solid #606b554d;padding-top:24px}.ai-card h3{font-size:18px;font-weight:400;line-height:1.5;letter-spacing:-.5px;margin-bottom:16px}.ai-card p,.ai-card ul{font-size:13px;color:var(--muted)}.ai-card ul{list-style:none}.ai-card li{padding:7px 0;border-bottom:1px solid #ffffff09}.ai-cta-card{border:1px solid #56644a;border-radius:4px;padding:24px;background:#c9e6b006}.ai-cta-card .btn-primary{font-size:11px}
#om-mig{border-bottom:1px solid var(--line)}.about-header{display:grid;grid-template-columns:220px 1fr;gap:65px;align-items:center}.about-portrait img{width:100%;height:280px;object-fit:cover;filter:grayscale(1);border-radius:3px}.about-location{font:10px monospace;color:var(--accent);display:block;margin-bottom:22px}.about-intro-text{color:var(--muted);font-size:14px;margin-bottom:16px;max-width:770px}.about-intro-text strong{color:var(--text);font-weight:400}.skills-list{display:flex;gap:20px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:22px;margin:30px 0 0!important;font:10px monospace;color:var(--muted)}.skills-list span+span:before{content:'↗';margin-right:20px;color:var(--accent)}
#kontakt{background:#c9e6b0;color:#1c2917}#kontakt .section-label{color:#4d653e}#kontakt .section-title{font-family:Georgia,serif;font-style:italic;font-size:clamp(60px,8vw,110px);letter-spacing:-.06em}#kontakt .section-subtitle{color:#4a6040}.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:80px}.contact-info h3{font-size:21px;letter-spacing:-.7px;font-weight:400;margin-bottom:16px}.contact-info p{font-size:13px;color:#4a6040;max-width:400px}.contact-detail{display:flex;gap:12px;margin-top:30px;font:11px monospace}.contact-form{display:grid;grid-template-columns:1fr 1fr;gap:20px}.form-group{display:flex;flex-direction:column;gap:6px}.form-group:has(textarea){grid-column:1/-1}.form-group label{font:10px monospace;text-transform:uppercase;letter-spacing:1px}input,textarea{width:100%;border:0;border-bottom:1px solid #789666;border-radius:0;background:transparent;color:#1c2917;padding:10px 0;outline:none;font-size:14px}input:focus,textarea:focus{border-color:#1c2917;box-shadow:0 1px #1c2917}input::placeholder,textarea::placeholder{color:#617653}textarea{resize:vertical}.submit-btn{background:#1e2a19;color:var(--accent);border-color:#1e2a19;justify-self:start;grid-column:1/-1}.submit-btn:hover{background:#354a2a}.submit-btn:disabled{opacity:.6;cursor:wait}.error-msg{display:none;color:#8c1e16;font-size:12px}#loading-spinner{display:none;align-items:center;gap:10px;font-size:12px;grid-column:1/-1}#loading-spinner.visible{display:flex}.spinner-svg{animation:spin 1s linear infinite}#thankyou-message{display:none;font-size:14px;grid-column:1/-1}footer{padding:30px 5%;display:flex;justify-content:space-between;gap:25px;font:10px monospace;color:var(--muted)}.footer-links{display:flex;gap:24px}footer a:hover{color:var(--accent)}@keyframes spin{to{transform:rotate(360deg)}}
@media(min-width:1500px){.hero{min-height:850px}.sculpture-stage{height:630px}}@media(max-width:1100px){.nav-links,.nav-right{gap:20px}.hero{grid-template-columns:1.1fr 1fr;min-height:730px}h1{font-size:72px}.sculpture-stage{height:470px;margin-left:-65px}.object-caption{font-size:8px;letter-spacing:0}.project-visual{height:190px;padding:20px 12px 0}.ai-grid{grid-template-columns:1fr 1fr}.ai-cta-card{grid-column:1/-1}.contact-grid{gap:40px}}
@media(max-width:760px){nav{padding:15px 5%}.nav-logo{font-size:28px}.hamburger{display:block}.nav-links{display:none;position:absolute;top:70px;left:0;right:0;background:#161815;border-bottom:1px solid var(--line);padding:20px 6%;flex-direction:column;align-items:stretch;gap:0}.nav-links.open{display:flex}.nav-links a{display:block;padding:13px 0;font-size:16px}.nav-right{gap:14px}.hero{min-height:0;padding:125px 6% 95px;grid-template-columns:1fr;overflow:hidden}.hero-coordinate{top:90px;right:6%;font-size:8px}.hero-content{padding:0}.hero-label{font-size:9px;margin-bottom:24px}h1{font-size:clamp(54px,10.9vw,81px);max-width:600px}.hero p{font-size:13px;margin:24px 0;max-width:370px}.hero-buttons{gap:20px}.btn-primary{padding:12px 20px}.sculpture-stage{height:350px;width:100%;max-width:480px;margin:-5px auto 25px}.object-caption{bottom:15px;left:10%;right:10%;font-size:8px}.object-controls{bottom:-23px;left:10%;right:10%}.sculpture-shadow{bottom:42px}.hero-bottom{bottom:22px;left:6%;right:6%;font-size:9px}.hero-bottom>span{max-width:200px}.hero-bottom>a{white-space:nowrap}section:not(.hero){padding:60px 6%}.section-title{font-size:40px}.section-label{font-size:9px}.section-subtitle{font-size:13px;margin-bottom:28px}.portfolio-grid{grid-template-columns:1fr;gap:34px}.project-visual{height:280px;padding:25px 30px 0}.portfolio-card:has(.markum-visual){display:block}.markum-visual{height:250px;margin-bottom:20px}.portfolio-card:has(.markum-visual) h3{font-size:24px}.services-grid{grid-template-columns:1fr 1fr;gap:0 24px}.service-card h3{font-size:17px;padding-right:14px}.service-card p{font-size:12px}.ai-grid{grid-template-columns:1fr;gap:30px}.ai-cta-card{grid-column:auto}.about-header{grid-template-columns:1fr;gap:28px}.about-portrait{max-width:180px}.about-portrait img{height:210px}.skills-list{gap:15px;font-size:9px}.skills-list span+span:before{margin-right:12px}.contact-grid{grid-template-columns:1fr;gap:30px}.contact-info h3{font-size:19px}.contact-form{gap:22px 16px}footer{flex-direction:column;padding:25px 6%;gap:15px}}@media(max-width:370px){h1{font-size:49px}.services-grid{grid-template-columns:1fr}.sculpture-stage{height:300px}.object-caption{font-size:7px}.contact-form{grid-template-columns:1fr}.hero-buttons{gap:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.project-visual img{transform:none}}
#kontakt{--text-tertiary:#4a6040}#kontakt button:focus-visible,#kontakt a:focus-visible{outline-color:#1c2917}



/* Cobalt prototype — hardware, firmware and software in one drawing. */
:root{--accent:#dfff51}body{overflow-x:hidden;overflow-x:clip}nav{background:#10121bef;border-color:#ffffff20;padding-top:18px;padding-bottom:18px}.nav-links{font:10px monospace;text-transform:uppercase}.nav-links li:last-child a{padding:9px 13px;background:#dfff51;color:#151a10}.nav-logo{font-weight:800}.nav-logo-tagline{font-size:9px}.lang-toggle{border-radius:2px}.lang-toggle button{border-radius:1px}
.hero{max-width:none;min-height:800px;height:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);align-items:center;gap:35px;padding:145px 4.5% 100px;background:#1b36c7;color:#f3f4e8;isolation:isolate;overflow:hidden}.blueprint-grid{position:absolute;inset:0;z-index:-1;background-image:linear-gradient(#d3deff0d 1px,transparent 1px),linear-gradient(90deg,#d3deff0d 1px,transparent 1px),linear-gradient(#d3deff09 1px,transparent 1px),linear-gradient(90deg,#d3deff09 1px,transparent 1px);background-size:30px 30px,30px 30px,150px 150px,150px 150px}.hero:before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 80% 50%,#4768ef26,transparent 65%);z-index:-1}.hero:after{content:"";position:absolute;inset:104px 26px 72px;border:1px solid #c4d7ff30;pointer-events:none;z-index:-1}.hero-content{position:relative;display:block;padding:0;max-width:650px;z-index:5;pointer-events:auto}.hero-label{font:9px monospace;letter-spacing:2.2px;color:#dfff51;margin:0 0 24px}.hero-label:before{background:#dfff51;box-shadow:0 0 16px #dfff5145;width:5px;height:5px}.hero-wordmark{position:relative;font:900 clamp(170px,24vw,360px)/.72 Arial,Helvetica,sans-serif;letter-spacing:-.09em;margin:0 0 35px -9px;white-space:nowrap;color:#f5f4e8;user-select:none;pointer-events:none}.hero-wordmark>span{position:absolute;right:0;top:3px;font:normal clamp(22px,2.3vw,38px)/1 Arial;color:#dfff51;letter-spacing:0}.hero h1{position:static;font:400 clamp(43px,3.5vw,57px)/1.04 Arial,Helvetica,sans-serif;letter-spacing:-.055em;text-transform:none;color:#f4f4ec;max-width:600px;margin:0}.hero h1>span{display:block}.hero h1 .gradient-text{font:italic 400 1.05em/1.08 Georgia,'Times New Roman',serif;letter-spacing:-.055em;color:#dfff51}.hero p{position:static;display:block;font-size:13px;line-height:1.75;color:#e1e7ff;max-width:405px;margin:25px 0 28px}.hero-buttons{position:static;display:flex;align-items:center;justify-content:flex-start;gap:25px}.hero .btn-primary{background:#dfff51;border-color:#dfff51;color:#182009;border-radius:2px;font:600 12px Arial;padding:14px 23px}.hero .btn-primary:hover{background:#efffb0;transform:translateY(-2px)}.hero .btn-secondary{color:#f1f4ff;border-color:#b9caff;font-size:12px}.hero-coordinate{position:absolute;right:4.5%;top:117px;color:#d4e0ff;font:8px/1.6 monospace;text-align:right;letter-spacing:1px}.hero-bottom{position:absolute;left:4.5%;right:4.5%;bottom:24px;border-color:#c2d4ff40;padding-top:17px;color:#c6d7ff;font:8px/1.5 monospace;gap:22px}.hero-bottom a{color:#f3f4e8;white-space:nowrap}.hero-bottom:before{content:'+';position:absolute;left:-18px;top:-10px;font:18px monospace;color:#dfff51}
.sculpture-stage{position:relative;inset:auto;transform:none;max-width:760px;width:100%;height:620px;margin:30px -15px 0 0;z-index:2;pointer-events:none}.sculpture-stage canvas{pointer-events:auto;cursor:default;touch-action:pan-y}.sculpture-fallback{transform:none;opacity:.85}.object-caption{left:3%;right:4%;bottom:28px;display:flex;justify-content:space-between;gap:15px;color:#d2dfff;font:7px/1.5 monospace;letter-spacing:.7px;border-top:1px solid #c3d7ff40;padding-top:13px}.drawing-status{display:flex;align-items:center;gap:7px}.drawing-status i{display:inline-block;width:4px;height:4px;background:#dfff51;border-radius:50%}.object-controls{display:none!important}
#ai-utbildning{background:radial-gradient(ellipse at 85% 0,#9c70ff40,transparent 65%),#4824ce;color:#f5f0ff}#ai-utbildning .section-subtitle,#ai-utbildning .ai-card p,#ai-utbildning .ai-card ul{color:#e8deff}#ai-utbildning .ai-card{border-color:#c9b3ff55}#ai-utbildning .ai-card li{border-color:#d9caff20}#ai-utbildning .ai-card h3{color:#f8f4ff}#ai-utbildning .ai-cta-card{background:#28116c66}#kontakt{background:#dfff51;color:#182009;--text-tertiary:#43501d}#kontakt .section-title{font-family:Arial,Helvetica,sans-serif;font-style:normal;font-size:clamp(60px,8vw,112px);letter-spacing:-.07em}#kontakt .section-label,#kontakt .section-subtitle,#kontakt .contact-info p{color:#43501d}#kontakt input,#kontakt textarea{color:#182009;border-color:#6f7c3b}#kontakt input::placeholder,#kontakt textarea::placeholder{color:#56652d}#kontakt .submit-btn{background:#15200c;color:#dfff51;border-color:#15200c}.section-label{letter-spacing:2px}.section-title{font-weight:400}.about-location{color:#dfff51}
@media(min-width:1600px){.hero{padding-left:max(4.5%,calc((100vw - 1480px)/2));padding-right:max(4.5%,calc((100vw - 1480px)/2));gap:55px}.hero-wordmark{font-size:360px}.hero h1{font-size:58px}.sculpture-stage{height:680px}.hero-coordinate{right:max(4.5%,calc((100vw - 1480px)/2))}.hero-bottom{left:max(4.5%,calc((100vw - 1480px)/2));right:max(4.5%,calc((100vw - 1480px)/2))}}
@media(max-width:1100px){.hero{min-height:760px;padding-top:150px;gap:15px;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}.hero-wordmark{font-size:24vw;margin-bottom:30px}.hero-wordmark>span{right:0;top:0;font-size:23px}.hero h1{font-size:clamp(38px,4.2vw,48px)}.hero p{font-size:12px;max-width:340px}.sculpture-stage{height:540px;margin-right:-15px}.hero-coordinate{font-size:7px}.hero-buttons{gap:18px}.hero .btn-primary{font-size:11px;padding:13px 20px}.hero .btn-secondary{font-size:11px}.object-caption{font-size:6px}.drawing-status{letter-spacing:0}}
@media(max-width:760px){nav{padding-top:15px;padding-bottom:15px}.nav-links{font:12px Arial;text-transform:none}.hero{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding:128px 6% 81px;gap:0}.hero:after{inset:91px 14px 62px}.hero-coordinate{top:96px;right:6%;font-size:6px;letter-spacing:.5px}.hero-content{max-width:none;padding:0}.hero-label{font-size:8px;letter-spacing:1.7px;margin-bottom:24px}.hero-wordmark{font-size:45vw;line-height:.73;margin:0 0 28px -5px;max-width:100%}.hero-wordmark>span{right:2%;top:0;font-size:25px}.hero h1{font-size:clamp(41px,9vw,60px);line-height:1.03}.hero h1 .gradient-text{font-size:1.02em}.hero p{display:block;font-size:12px;line-height:1.75;max-width:440px;margin:22px 0 24px}.hero-buttons{gap:24px;justify-content:flex-start;flex-wrap:wrap}.hero .btn-primary{font-size:11px;padding:13px 21px}.hero .btn-secondary{font-size:11px}.sculpture-stage{position:relative;inset:auto;transform:none;align-self:center;width:calc(100% + 24px);max-width:540px;height:385px;margin:22px -12px 0}.object-caption{left:6%;right:6%;bottom:8px;font-size:6px;padding-top:11px;letter-spacing:.3px}.hero-bottom{left:6%;right:6%;bottom:19px;font-size:6px;padding-top:12px;gap:15px}.hero-bottom>span{max-width:210px}.hero-bottom:before{display:none}.drawing-status{font-size:6px}.nav-links{background:#11141c}#kontakt .section-title{font-size:17vw}}
@media(max-width:370px){.hero{padding-top:120px}.hero h1{font-size:38px}.hero-wordmark{margin-bottom:25px}.hero-label{font-size:7px}.hero .btn-primary{padding:12px 17px}.hero-buttons{gap:19px}.sculpture-stage{height:340px}.hero-bottom>span{max-width:165px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Restore the condensed, assertive typography of the neon direction. */
.hero h1{font-family:Impact,'Arial Narrow',Arial,sans-serif;font-size:clamp(48px,4.4vw,69px);font-weight:900;line-height:.94;letter-spacing:-.035em;text-transform:uppercase}.hero h1 .gradient-text{font:inherit;font-style:normal;letter-spacing:inherit;color:#dfff51}.section-title{font-family:Impact,'Arial Narrow',Arial,sans-serif;font-size:clamp(46px,6vw,90px);font-weight:900;line-height:.98;text-transform:uppercase;letter-spacing:-.035em}.portfolio-card h3{font-family:Impact,'Arial Narrow',Arial,sans-serif;font-size:26px;font-weight:900;text-transform:uppercase;letter-spacing:-.4px}.service-card h3{font-family:Impact,'Arial Narrow',Arial,sans-serif;font-size:25px;font-weight:900;text-transform:uppercase;letter-spacing:-.3px}#kontakt .section-title{font-family:Impact,'Arial Narrow',Arial,sans-serif;font-weight:900;letter-spacing:-.04em}
/* Art-directed case covers built from the projects' own photography. */
.portfolio-grid{gap:28px}.project-cover{height:355px;padding:0;border-radius:3px;position:relative;display:block;perspective:none;isolation:isolate;background:#191b19!important;overflow:hidden}.project-cover:after{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,#0005 0%,transparent 35%,#0002 50%,#000b 100%);pointer-events:none}.project-cover img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 40%;box-shadow:none;transform:none;transition:transform .65s cubic-bezier(.2,.65,.3,1)}.portfolio-card:hover .project-cover img{transform:scale(1.045)}.cover-meta{position:absolute;left:23px;top:24px;z-index:2;color:#fff8e6;font:8px monospace;letter-spacing:1.4px}.cover-arrow{position:absolute;right:18px;top:17px;z-index:2;display:grid;place-items:center;width:30px;height:30px;border:1px solid #ffffff60;border-radius:50%;color:#fff8e6;font:17px Arial}.cover-brand{position:absolute;left:23px;right:23px;bottom:25px;z-index:2;font:400 45px/.92 Georgia,'Times New Roman',serif;letter-spacing:-2px;color:#fff6e6}.cover-brand em{font-weight:400}.cover-brand small{display:block;font:7px/1.5 monospace;letter-spacing:1.9px;margin-top:20px}.cover-spa img{object-position:45% 35%}.cover-spa .cover-brand{font-size:48px}.cover-spa:after{background:linear-gradient(180deg,#110d1955,transparent 40%,#100c1bcc)}.cover-skin img{object-position:50% 30%}.cover-skin:after{background:linear-gradient(180deg,#45342944,transparent 35%,#312015a6)}.cover-skin .cover-brand{font-size:49px;color:#fff5e6}.cover-garden img{object-position:50% 34%}.cover-garden:after{background:linear-gradient(180deg,#16311f55,transparent 30%,#0d251ccc)}.cover-garden .cover-brand{font:900 55px/.86 Impact,'Arial Narrow',Arial,sans-serif;letter-spacing:-1.4px;color:#f0f1d9}.cover-garden .cover-brand small{font:7px/1.5 monospace;letter-spacing:1.1px}.cover-flower{position:absolute;right:0;bottom:33px;font:54px Arial;color:#e4e9b5}.portfolio-card p{font-size:12px;line-height:1.8}.portfolio-card-link{margin-top:15px}
.markum-visual{height:330px;padding:45px 28px 0;background:radial-gradient(ellipse at 50% 100%,#37546c,#14222f 80%);position:relative;perspective:none;border-radius:3px;overflow:hidden;display:flex;align-items:flex-start;justify-content:center}.markum-visual img{width:100%;height:auto;box-shadow:0 15px 40px #0005;border-radius:5px 5px 0 0;transform:none!important;transition:transform .5s}.markum-caption{position:absolute;left:28px;top:19px;color:#c6d6e1;font:8px monospace;letter-spacing:1.4px}.portfolio-card:has(.markum-visual) h3{font-size:44px}.portfolio-card:has(.markum-visual){grid-template-columns:1.5fr 1fr;row-gap:8px}.portfolio-card:has(.markum-visual) .portfolio-card-link{justify-self:start;align-self:start}
@media(min-width:1600px){.hero h1{font-size:70px}}
@media(max-width:1100px){.hero h1{font-size:clamp(45px,4.4vw,55px)}.project-cover{height:310px}.cover-meta{left:17px;font-size:7px;letter-spacing:1px}.cover-brand{left:17px;right:17px}.cover-spa .cover-brand,.cover-skin .cover-brand{font-size:39px}.cover-garden .cover-brand{font-size:46px}.cover-flower{font-size:40px}.cover-brand small{font-size:6px;letter-spacing:1px}.markum-visual{height:280px;padding:43px 20px 0}}
@media(max-width:760px){.hero h1{font-size:clamp(42px,10.5vw,58px);line-height:.96}.hero h1 .gradient-text{font:inherit}.section-title{font-size:clamp(44px,11vw,65px)}.project-cover{height:auto;aspect-ratio:1.15;margin-bottom:19px}.cover-meta{left:23px;top:24px;font-size:8px}.cover-brand{left:23px;right:23px;bottom:24px}.cover-spa .cover-brand,.cover-skin .cover-brand{font-size:46px}.cover-garden .cover-brand{font-size:52px}.cover-brand small,.cover-garden .cover-brand small{font-size:7px}.cover-flower{font-size:48px}.portfolio-card h3{font-size:26px}.portfolio-grid{gap:36px}.markum-visual{height:245px;margin-bottom:20px;padding:43px 20px 0}.portfolio-card:has(.markum-visual){display:block}.portfolio-card:has(.markum-visual) h3{font-size:34px}.service-card h3{font-size:23px}}
@media(prefers-reduced-motion:reduce){.portfolio-card:hover .project-cover img{transform:none}}

/* Neon actions invert to black and green on hover and keyboard focus. */
.btn-primary:hover,.btn-primary:focus-visible,.hero .btn-primary:hover,.hero .btn-primary:focus-visible{background:#101210;color:#dfff51;border-color:#dfff51;transform:translateY(-2px)}
.nav-links li:last-child a:hover,.nav-links li:last-child a:focus-visible{background:#101210;color:#dfff51;box-shadow:inset 0 0 0 1px #dfff51}
.submit-btn:not(:disabled):hover,.submit-btn:focus-visible,#kontakt .submit-btn:not(:disabled):hover,#kontakt .submit-btn:focus-visible{background:#101210;color:#dfff51;border-color:#101210}

/* Characterful, locally served body type; condensed display headings stay intact. */
.hero p{font-size:14px;line-height:1.75}.section-subtitle,.about-intro-text{font-size:15px;line-height:1.8}.portfolio-card p,.service-card p,.ai-card p,.ai-card ul,.contact-info p{font-size:14px;line-height:1.8}.hero .btn-primary{font-family:inherit}
@media(max-width:760px){.hero p{font-size:14px}.section-subtitle,.about-intro-text{font-size:14px}}

/* Variant B: one proportional lockup shared by mobile and desktop. */
.nav-logo{display:flex;flex-direction:row;align-items:last baseline;gap:1.15em;font-size:11px;font-weight:400;letter-spacing:normal;line-height:1;flex-shrink:0}.nav-logo-name{font-size:3em;font-weight:700;letter-spacing:-.07em;line-height:1}.nav-logo-tagline{display:block;max-width:none;margin:0;font-size:.72em;font-weight:400;line-height:1.6;letter-spacing:.08em;color:#c7cbc4;white-space:nowrap}.nav-logo-coffee{display:block;flex:none;margin-left:.4em;width:1.75em;height:2.1em;color:var(--accent);overflow:visible;transform:translateY(.06em)}.coffee-steam{animation:coffee-steam 2.8s ease-in-out infinite;transform-origin:center}
@keyframes coffee-steam{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(-2px);opacity:1}}
@media(max-width:760px){nav{gap:10px}.nav-right{gap:8px}.nav-links{top:100%}}
@media(max-width:480px){.nav-right{gap:6px}.lang-toggle button{font-size:9px;padding:4px 5px}.hamburger{padding:4px}}

/* Project titles belong to the image; the description and link follow below. */
.portfolio-card .cover-brand{font:900 55px/.88 Impact,'Arial Narrow',Arial,sans-serif;letter-spacing:-1.4px;color:#dfff51;margin:0;text-shadow:0 2px 22px #0009}.portfolio-card .cover-brand small{font:7px/1.5 monospace;letter-spacing:1.1px;color:#dfff51}.cover-flower{color:#dfff51}.project-cover:after,.cover-spa:after,.cover-skin:after,.cover-garden:after{background:linear-gradient(180deg,#080b0c55,transparent 38%,#080b0c66 55%,#080b0cee)}.cover-meta{color:#dfff51;background:#101210d9;padding:6px 8px}.cover-arrow{color:#dfff51;border-color:#dfff5180;background:#10121080}.cover-garden img{object-position:50% 34%}.portfolio-card:has(.markum-visual){grid-template-columns:1.5fr 1fr;row-gap:18px}.markum-visual{grid-row:1/3;height:auto;aspect-ratio:1.6;padding:0;background:#101210;border:1px solid #dfff5126}.portfolio-card:has(.markum-visual) .markum-caption{position:absolute;left:22px;top:16px;margin:0;font:900 30px/.9 Impact,'Arial Narrow',Arial,sans-serif;letter-spacing:-.5px;color:#dfff51}.markum-type{position:absolute;right:22px;top:24px;font:7px monospace;letter-spacing:1px;color:#dfff51}.markum-visual img{position:absolute;left:20px;top:58px;width:calc(100% - 40px);height:calc(100% - 78px);object-fit:contain;object-position:top;border-radius:4px;box-shadow:none}.portfolio-card:has(.markum-visual) p{align-self:end}.portfolio-card:has(.markum-visual) .portfolio-card-link{align-self:start}
@media(max-width:1100px){.portfolio-card .cover-brand{font-size:46px}}
@media(max-width:760px){.portfolio-card .cover-brand{font-size:52px}.markum-visual{height:auto;aspect-ratio:1.25;padding:0}.portfolio-card:has(.markum-visual) .markum-caption{font-size:28px;top:17px;left:16px}.markum-type{right:16px;font-size:6px}.markum-visual img{left:12px;top:54px;width:calc(100% - 24px);height:calc(100% - 66px)}}

/* Distinct project categories: browser previews for websites, icons for apps. */
#portfolio{background:#101210;color:#f3f4e8}#portfolio .section-label{color:#dfff51}#portfolio .section-subtitle{color:#b6bcb2}.portfolio-index{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 36px}.portfolio-index a{display:flex;align-items:center;gap:25px;border:1px solid #dfff5140;padding:10px 14px;color:#dfff51;font:10px monospace;text-transform:uppercase;letter-spacing:1px;transition:background .2s,color .2s}.portfolio-index a:hover{background:#dfff51;color:#101210}.portfolio-category{scroll-margin-top:100px}.portfolio-category+.portfolio-category{margin-top:64px}.portfolio-category-header{display:flex;align-items:flex-end;justify-content:space-between;gap:25px;border-top:1px solid #dfff5160;padding-top:23px;margin-bottom:27px}.portfolio-category-name{display:flex;align-items:baseline;gap:15px}.portfolio-category-number{font:11px monospace;color:#a4b873}.portfolio-category-name h3{font:900 clamp(36px,4vw,52px)/1 Impact,'Arial Narrow',Arial,sans-serif;letter-spacing:-.02em;text-transform:uppercase;color:#dfff51}.portfolio-category-header>p{font-size:12px;line-height:1.6;color:#a6ada1;max-width:280px}.website-grid,.app-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px}#portfolio .portfolio-card p{color:#b6bcb2}#portfolio .portfolio-card-link{color:#dfff51;border-color:#dfff5155}#portfolio .project-visual{position:relative;display:block;height:auto;aspect-ratio:1.15;margin:0 0 20px;padding:18px;border:1px solid #ffffff16;border-radius:4px;background:#1a1e18;perspective:none;overflow:hidden;transition:border-color .25s}#portfolio .portfolio-card:hover .project-visual{border-color:#dfff5170}.website-browser{width:100%;border:1px solid #ffffff20;border-radius:5px;overflow:hidden;background:#101210;box-shadow:0 12px 26px #0005;transition:transform .35s}#portfolio .portfolio-card:hover .website-browser{transform:translateY(-3px)}.website-browser-bar{height:25px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 9px;color:#b6bcb2;font:7px monospace;letter-spacing:.2px}.browser-dots{font-size:5px;letter-spacing:2px;color:#6f7e65}#portfolio .website-visual img{position:static;display:block;width:100%;height:auto;aspect-ratio:1440/746;object-fit:contain;box-shadow:none;border-radius:0;transform:none;transition:none}#portfolio .project-name{position:absolute;left:20px;right:20px;bottom:19px;margin:0;font:900 clamp(28px,3vw,43px)/.95 Impact,'Arial Narrow',Arial,sans-serif;letter-spacing:-.02em;color:#dfff51;text-transform:uppercase}#portfolio .app-visual{background:radial-gradient(ellipse at 50% 30%,#333926,transparent 70%),#171b15}.app-platforms{position:absolute;left:18px;top:19px;color:#b8c6a0;font:7px monospace;letter-spacing:.7px}.app-arrow{position:absolute;right:18px;top:13px;font-size:21px;color:#dfff51}#portfolio .app-visual .app-icon{position:absolute;top:44px;left:50%;width:62%;max-width:230px;height:auto;object-fit:contain;transform:translateX(-50%);box-shadow:none;filter:drop-shadow(0 10px 15px #0005);border-radius:0}
@media(max-width:1100px){#portfolio .project-visual{aspect-ratio:1;padding:12px}#portfolio .project-name{left:14px;right:14px;bottom:16px;font-size:30px}.website-browser-bar{height:22px;font-size:6px;padding:0 7px;gap:4px}.browser-dots{letter-spacing:1px;font-size:4px}#portfolio .app-visual .app-icon{top:35px;width:64%}.app-platforms{left:14px;font-size:6px;letter-spacing:.2px}}
@media(max-width:760px){.website-grid,.app-grid{grid-template-columns:1fr;gap:32px}.portfolio-category-header{align-items:flex-start;flex-direction:column;gap:10px;padding-top:19px;margin-bottom:22px}.portfolio-category-header>p{max-width:none}.portfolio-category+.portfolio-category{margin-top:44px}.portfolio-index{margin-bottom:28px}.portfolio-index a{font-size:9px;gap:18px}#portfolio .project-visual{aspect-ratio:1.15;padding:16px}#portfolio .project-name{left:18px;bottom:18px;font-size:39px}.website-browser-bar{height:25px;font-size:7px;padding:0 9px}.browser-dots{font-size:5px;letter-spacing:2px}#portfolio .app-visual .app-icon{top:40px;width:62%}.app-platforms{left:18px;top:18px;font-size:7px;letter-spacing:.7px}}
@media(prefers-reduced-motion:reduce){#portfolio .portfolio-card:hover .website-browser{transform:none}}

/* Let website cards follow their contents and keep short links with the copy. */
#portfolio .website-visual{aspect-ratio:auto}#portfolio .website-visual .project-name{position:static;margin:14px 0 0}#portfolio .project-description{max-width:none}#portfolio .project-description .portfolio-card-link{margin:0 0 0 8px;padding-bottom:2px;white-space:nowrap;vertical-align:baseline}
#tjanster{position:relative;border-top:1px solid #dfff5180;background:#171a16}#tjanster:before{content:"";position:absolute;top:-2px;left:5%;width:64px;height:3px;background:#dfff51}
@media(max-width:760px){#tjanster:before{left:6%}}

/* Project links invert on hover and when the card receives keyboard focus. */
#portfolio .portfolio-card-link{transition:color .18s,background .18s,border-color .18s,box-shadow .18s}
#portfolio .portfolio-card:hover .portfolio-card-link,#portfolio .portfolio-card:focus-visible .portfolio-card-link{background:#dfff51;color:#101210;border-color:transparent;box-shadow:0 0 0 4px #dfff51}
.portfolio-index a:focus-visible{background:#dfff51;color:#101210}