:root{
  --bg:#0a0a0c;--surface:#111114;--surface2:#17171b;--text:#f5f5f2;--muted:#a4a4aa;--line:rgba(255,255,255,.11);
  --accent:#c8ff48;--accent2:#a7dc2c;--shadow:0 30px 80px rgba(0,0,0,.3);--max:1180px;
}
[data-theme="light"]{--bg:#f4f4f0;--surface:#fff;--surface2:#e9e9e4;--text:#111113;--muted:#64646a;--line:rgba(0,0,0,.11);--shadow:0 30px 80px rgba(0,0,0,.12)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:"DM Sans",sans-serif;line-height:1.55;overflow-x:hidden}body:has(.modal.open){overflow:hidden}
a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}.section{max-width:var(--max);margin:auto;padding:120px 28px}.progress{position:fixed;top:0;left:0;height:3px;background:var(--accent);width:0;z-index:1000}
.nav-wrap{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}
.nav{height:76px;max-width:var(--max);margin:auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;gap:25px}.brand{display:flex;align-items:center;gap:11px;font-weight:700}.brand-mark{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--text);color:var(--bg);font:700 12px "Space Grotesk"}.nav-links{display:flex;gap:30px;color:var(--muted);font-size:14px}.nav-links a:hover,.footer-contact a:hover{color:var(--text)}.nav-actions{display:flex;gap:10px;align-items:center}.icon-btn,.menu-btn{border:1px solid var(--line);background:var(--surface);color:var(--text);width:38px;height:38px;border-radius:50%;cursor:pointer}.nav-cta{background:var(--text);color:var(--bg);padding:10px 16px;border-radius:999px;font-size:14px;font-weight:700}.nav-cta span,.button span{margin-left:10px}.menu-btn{display:none}.mobile-menu{display:none;max-width:var(--max);margin:auto;padding:0 28px 18px;gap:14px}.mobile-menu a{padding:12px 0;border-bottom:1px solid var(--line);color:var(--muted)}
.hero{min-height:calc(100vh - 76px);display:flex;align-items:center;padding-top:80px;padding-bottom:90px}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:60px;width:100%}.eyebrow,.section-label{font:600 11px "Space Grotesk";letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}.dot{display:inline-block;width:7px;height:7px;background:var(--accent);border-radius:50%;margin-right:8px;box-shadow:0 0 16px var(--accent)}h1,h2,h3{font-family:"Space Grotesk",sans-serif;letter-spacing:-.045em;margin:0}h1{font-size:clamp(48px,6.6vw,88px);line-height:.98;max-width:780px;margin:24px 0}h1 em,h2 span{font-style:normal;color:var(--accent)}.hero-text{font-size:18px;color:var(--muted);max-width:630px}.hero-actions{display:flex;gap:12px;margin:32px 0}.button{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:14px 20px;font-weight:700;font-size:14px;border:1px solid var(--line);transition:.25s transform,.25s background}.button:hover{transform:translateY(-3px)}.button-primary{background:var(--accent);color:#0a0a0c;border-color:var(--accent)}.button-ghost{background:transparent}.button-light{background:#fff;color:#111;border-color:#fff}.hero-meta{display:flex;gap:28px;color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.1em}.hero-art{min-height:480px;position:relative;display:grid;place-items:center}.orbit{position:absolute;border:1px solid var(--line);border-radius:50%;aspect-ratio:1}.orbit-a{width:92%;animation:spin 24s linear infinite}.orbit-b{width:66%;animation:spin 18s linear reverse infinite;border-color:color-mix(in srgb,var(--accent) 28%,transparent)}@keyframes spin{to{transform:rotate(360deg)}}.code-card{position:relative;width:min(420px,90%);border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(18px);border-radius:18px;box-shadow:var(--shadow);overflow:hidden;transform:rotate(-3deg);transition:.4s}.code-card:hover{transform:rotate(0) translateY(-6px)}.code-top{height:42px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:6px;padding:0 15px}.code-top span{width:7px;height:7px;border-radius:50%;background:var(--muted);opacity:.5}.code-top small{margin-left:auto;color:var(--muted);font-size:10px}.code-body{padding:30px;font:500 15px/2.1 ui-monospace,SFMono-Regular,Menlo,monospace}.code-body .muted{color:var(--muted)}.code-body .accent{color:var(--accent)}.code-body .string{color:#f2a8ff}.code-body .tag{color:#7fd8ff}.floating-card{position:absolute;background:var(--surface);border:1px solid var(--line);padding:14px 17px;border-radius:14px;box-shadow:var(--shadow);display:flex;flex-direction:column}.floating-card strong{font:700 25px "Space Grotesk"}.floating-card span{font-size:10px;color:var(--muted)}.card-one{top:14%;right:2%}.card-two{bottom:13%;left:0}
.ticker{border-block:1px solid var(--line);overflow:hidden;white-space:nowrap}.ticker-track{display:flex;gap:34px;align-items:center;width:max-content;padding:18px 0;animation:ticker 28s linear infinite;font:600 12px "Space Grotesk";letter-spacing:.14em}.ticker-track b{color:var(--accent)}@keyframes ticker{to{transform:translateX(-50%)}}
.section-label{margin-bottom:28px}.section-label span{color:var(--text);margin-right:14px}.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px}.about h2,.section-head h2,.service-intro h2{font-size:clamp(42px,5vw,70px);line-height:1.02}.about-copy{max-width:590px;color:var(--muted);font-size:17px}.about-copy p{margin-top:0;margin-bottom:22px}.about-copy strong{color:var(--text)}.skill-line{border-top:1px solid var(--line);margin-top:34px;padding-top:16px;display:flex;justify-content:space-between;font-size:12px}.skill-line strong{color:var(--accent)}
.section-head{display:flex;justify-content:space-between;gap:40px;align-items:end;margin-bottom:50px}.section-head>p{max-width:390px;color:var(--muted);margin:0}.project-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}.project-wide{grid-column:span 2}.project-card{min-width:0}.project-preview{padding:0;border:0;background:none;width:100%;cursor:pointer;text-align:left}.browser-preview{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;transition:.35s transform,.35s box-shadow}.project-card:hover .browser-preview{transform:translateY(-7px);box-shadow:var(--shadow)}.mini-bar{height:36px;display:flex;align-items:center;gap:5px;padding:0 12px;border-bottom:1px solid var(--line);color:var(--muted);font-size:9px}.mini-bar i{width:6px;height:6px;border-radius:50%;background:var(--muted);opacity:.5}.mini-bar span{margin-left:8px;opacity:.7}.mini-site{height:285px;padding:46px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}.mini-site:after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;right:-50px;bottom:-100px;background:color-mix(in srgb,var(--accent) 16%,transparent)}.mini-site small{font:600 9px "Space Grotesk";letter-spacing:.12em;opacity:.75}.mini-site strong{font:600 clamp(27px,3.5vw,48px);font-family:"Space Grotesk";line-height:.98;letter-spacing:-.05em;z-index:1}.mini-site b{font:600 10px "Space Grotesk";letter-spacing:.08em;z-index:1}.upvc{background:linear-gradient(135deg,#ddd8ca,#7f7b71);color:#171716}.cable{background:linear-gradient(135deg,#111d2a,#245d87);color:#f3f7fb}.gear{background:linear-gradient(135deg,#181818,#5a5a5a);color:#fff}.lotlikar{background:linear-gradient(135deg,#111,#30352b);color:#fff}.alegra{background:linear-gradient(135deg,#162322,#47766a);color:#f3f8f2}.savio{background:linear-gradient(135deg,#171717,#55483f);color:#fff}.project-info{display:flex;justify-content:space-between;align-items:center;padding:17px 2px}.project-info span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em}.project-info h3{font-size:21px;margin-top:4px;letter-spacing:-.03em}.arrow{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:50%;width:38px;height:38px;cursor:pointer;font-size:16px}
.services{border-top:1px solid var(--line)}.service-intro{display:grid;grid-template-columns:1fr .65fr;gap:80px;align-items:end;margin-bottom:65px}.service-intro p{color:var(--muted);max-width:420px}.service-list{border-top:1px solid var(--line)}.service{display:grid;grid-template-columns:70px 1fr 40px;gap:20px;padding:30px 0;border-bottom:1px solid var(--line);align-items:start}.service>span{color:var(--muted);font:12px "Space Grotesk"}.service h3{font-size:27px;margin-bottom:7px}.service p{color:var(--muted);max-width:560px;margin:0}.service>b{font-size:22px;color:var(--accent)}
.cta-section{padding:120px 28px 90px;background:var(--accent);color:#0a0a0c}.cta-inner{max-width:var(--max);margin:auto}.cta-section .eyebrow{color:#364400}.cta-section .dot{background:#0a0a0c;box-shadow:none}.cta-section h2{font-size:clamp(48px,7vw,92px);line-height:.95;margin:22px 0}.cta-section h2 em{font-style:normal;color:#fff}.cta-section>div>p:not(.eyebrow){max-width:520px}.cta-buttons{display:flex;gap:10px;margin:28px 0 55px}.quote-form{max-width:800px;display:grid;grid-template-columns:1fr 1fr;gap:16px;border-top:1px solid rgba(0,0,0,.2);padding-top:25px}.quote-form label{display:block;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;margin-bottom:8px}.quote-form input,.quote-form textarea{width:100%;border:1px solid rgba(0,0,0,.18);background:rgba(255,255,255,.35);color:#111;padding:13px 14px;border-radius:10px;outline:none}.quote-form textarea{resize:vertical}.quote-form input:focus,.quote-form textarea:focus{border-color:#111}.quote-form .full{grid-column:span 2}.form-submit{grid-column:span 2;justify-self:start;border:0;background:#0a0a0c;color:#fff;padding:14px 20px;border-radius:999px;font-weight:700;cursor:pointer}.form-submit span{margin-left:10px}
footer{background:#070708;color:#fff;padding:28px}.footer-main,.footer-bottom{max-width:var(--max);margin:auto;display:flex;justify-content:space-between;align-items:center}.footer-main{padding:25px 0}.footer-brand{display:flex;align-items:center;gap:12px}.footer-contact{display:flex;gap:10px}.footer-contact a{border:1px solid rgba(255,255,255,.15);border-radius:999px;padding:10px 16px;font-size:13px}.footer-bottom{border-top:1px solid rgba(255,255,255,.1);padding-top:18px;color:#777;font-size:11px}
.modal{position:fixed;inset:0;display:none;z-index:2000}.modal.open{display:block}.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.78);backdrop-filter:blur(10px)}.modal-panel{position:relative;z-index:1;width:min(1050px,calc(100% - 30px));height:min(88vh,850px);margin:6vh auto 0;background:var(--surface);border:1px solid var(--line);border-radius:20px;overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column}.modal-top{padding:18px 20px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.modal-top span{font-size:9px;text-transform:uppercase;letter-spacing:.13em;color:var(--muted)}.modal-top h3{font-size:23px}.close-btn{width:38px;height:38px;border-radius:50%;background:var(--surface2);border:0;color:var(--text);font-size:25px;cursor:pointer}.live-frame-wrap{flex:1;min-height:0;background:#fff;position:relative}.live-frame-wrap{display:grid;place-items:center;padding:24px;background:var(--surface2);overflow:auto}.modal-preview{width:min(900px,96%);box-shadow:var(--shadow);border-radius:16px;overflow:hidden}.modal-preview .mini-site{height:clamp(300px,50vh,500px)}.frame-loading{display:none}.modal-actions{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:15px 20px;border-top:1px solid var(--line)}.modal-actions p{margin:0;color:var(--muted);font-size:13px}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}.reveal.visible{opacity:1;transform:none}
@media(max-width:800px){.nav-links,.nav-cta{display:none}.menu-btn{display:block}.mobile-menu.open{display:grid}.hero-grid,.about-grid,.service-intro{grid-template-columns:1fr;gap:45px}.hero{padding-top:70px}.hero-art{min-height:380px}.card-one{right:0}.card-two{left:2%}.section{padding:90px 20px}.section-head{display:block}.section-head>p{margin-top:22px}.project-grid{grid-template-columns:1fr}.project-wide{grid-column:auto}.mini-site{height:245px;padding:30px}.mini-site strong{font-size:38px}.service{grid-template-columns:45px 1fr 25px}.service h3{font-size:23px}.quote-form{grid-template-columns:1fr}.quote-form .full,.form-submit{grid-column:auto}.footer-main,.footer-bottom{align-items:flex-start;gap:20px}.footer-main{flex-direction:column}.footer-bottom{flex-direction:column}.modal-panel{height:90vh;margin-top:5vh}.modal-actions{flex-direction:column;align-items:stretch}.modal-actions .button{width:100%}}
@media(max-width:480px){h1{font-size:50px}.hero-text{font-size:16px}.hero-actions,.cta-buttons{flex-direction:column;align-items:stretch}.hero-meta{gap:12px;font-size:9px}.hero-art{min-height:330px}.code-card{width:95%}.floating-card{padding:10px}.card-one{top:8%}.card-two{bottom:7%}.mini-site{height:220px}.mini-site strong{font-size:31px}.footer-contact{width:100%}.footer-contact a{flex:1;text-align:center}}

/* Final responsive hardening */
html, body { width:100%; max-width:100%; overflow-x:clip; }
.nav, .section, .hero-grid, .project-grid, .dynamic-grid, .section-head,
.about-grid, .service-intro, .service, .project-info, .cta-inner, footer { min-width:0; }
.project-card, .project-preview, .browser-preview, .project-info > div { min-width:0; max-width:100%; }
.project-info { width:100%; }
.project-info > div { flex:1 1 auto; }
.project-info h3 { min-width:0; max-width:100%; overflow-wrap:anywhere; word-break:normal; }
.dynamic-work { border-top:1px solid var(--line); }
.dynamic-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; }
.dynamic-note { margin-top:42px; padding:22px 0 0; border-top:1px solid var(--line); display:grid; grid-template-columns:160px 1fr; gap:25px; }
.dynamic-note span { font:600 10px "Space Grotesk"; letter-spacing:.13em; color:var(--muted); }
.dynamic-note p { margin:0; max-width:650px; color:var(--muted); }
.domnic { background:linear-gradient(135deg,#1b1b1d,#5c6150); color:#fff; }
.festival-lotlikar { background:linear-gradient(135deg,#17231e,#466c58); color:#f5fff8; }
.domnic:after, .festival-lotlikar:after { background:color-mix(in srgb,var(--accent) 18%,transparent); }
@media(max-width:800px) {
  .dynamic-grid { grid-template-columns:minmax(0,1fr); }
  .dynamic-note { grid-template-columns:1fr; gap:10px; }
  .nav { padding-inline:18px; gap:10px; }
  .brand { min-width:0; }
  .brand > span:last-child { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .nav-actions { flex-shrink:0; }
  .project-info h3 { font-size:19px; }
}
@media(max-width:480px) {
  .section { padding-inline:16px; }
  .nav { padding-inline:12px; }
  .brand { gap:7px; font-size:14px; }
  .brand-mark { width:32px; height:32px; flex:0 0 32px; }
  .project-info { gap:10px; }
  .project-info h3 { font-size:18px; line-height:1.1; }
  .project-info span { font-size:9px; }
  .arrow { flex:0 0 38px; }
  .mini-site { width:100%; max-width:100%; }
}