:root{--black:#05070a;--paper:#e9e9e6;--blue:#315cff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--black);color:#f0f1f2;font-family:Arial,Helvetica,sans-serif}a{color:inherit;text-decoration:none}header{height:84px;position:absolute;z-index:20;inset:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:0 5vw;border-bottom:1px solid #ffffff20}.brand{font-size:25px;font-weight:800;letter-spacing:-1.5px}.brand span{font-weight:300}nav{display:flex;gap:34px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#bbc0c6}nav a:hover{color:#fff}.navCta{font-size:11px;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid;padding-bottom:8px}.hero{height:100vh;min-height:760px;position:relative;display:flex;align-items:center;overflow:hidden}.heroBg{position:absolute;inset:0;background:linear-gradient(90deg,#05070a 3%,#05070ad9 35%,transparent 68%),linear-gradient(0deg,#05070a,transparent 38%),url('assets/hero.png') center/cover no-repeat}.grid{position:absolute;inset:0;opacity:.09;background-image:linear-gradient(#fff1 1px,transparent 1px),linear-gradient(90deg,#fff1 1px,transparent 1px);background-size:12.5vw 100%}.heroCopy{position:relative;z-index:2;width:90%;max-width:1280px;margin:auto}.eyebrow,.kicker{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#adb2b8}.hero h1{font-size:clamp(72px,9.5vw,150px);line-height:.83;letter-spacing:-.075em;margin:38px 0 32px;max-width:1000px}.hero h1 em,.section h2 em{font:italic 400 1em Georgia,serif;color:#7893ff}.lead{max-width:510px;color:#d9dde2;font-size:17px;line-height:1.7}.actions{display:flex;gap:12px;margin-top:38px}.btn{min-height:52px;display:inline-flex;align-items:center;justify-content:center;padding:0 24px;border:1px solid #ffffff45;background:transparent;color:inherit;text-transform:uppercase;letter-spacing:.13em;font-size:10px;cursor:pointer}.primary{background:var(--blue);border-color:var(--blue);color:#fff}.primary:hover{background:#476aff}.scroll{position:absolute;right:4vw;bottom:38px;font-size:9px;letter-spacing:.2em;color:#858d96}.section{padding:125px 6vw}.statement{background:#090c11;display:grid;grid-template-columns:1fr 3fr;gap:50px}.statement>div{display:grid;grid-template-columns:1.4fr 1fr;gap:7vw}.section h2{font-size:clamp(48px,6vw,88px);line-height:.98;letter-spacing:-.055em;margin:0}.statement h2 span{color:#6581ff}.statement div>p,.sectionHead>p,.servicesIntro>p,.aboutCopy>p,.contactTitle>p{color:#969da5;line-height:1.8;font-size:15px;max-width:510px}.work{background:var(--paper);color:#0b0d10}.work .kicker{color:#646a70}.sectionHead{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:62px}.sectionHead h2{margin-top:20px}.projects{display:grid;grid-template-columns:1.2fr .9fr .9fr;gap:14px}.project{height:520px;position:relative;overflow:hidden;background:#111;color:#fff}.project .light{position:absolute;inset:0;transition:transform .6s,filter .6s}.project:hover .light{transform:scale(1.05);filter:brightness(1.2)}.blue .light{background:radial-gradient(ellipse at 62% 42%,#b2c7ff 0 2%,transparent 4%),conic-gradient(from 200deg at 60% 45%,transparent,#164bff 10%,transparent 18%),radial-gradient(circle at 50% 70%,#142d87,#03050a 62%)}.red .light{background:linear-gradient(110deg,transparent 37%,#df2432 38% 39%,transparent 41%),linear-gradient(72deg,transparent 48%,#f06a35 49% 51%,transparent 52%),radial-gradient(circle at 50% 70%,#701220,#050507 65%)}.gold .light{background:conic-gradient(from 170deg at 48% 24%,transparent,#e9b04e 7%,transparent 13%),linear-gradient(#18140a,#050505)}.project:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent 48%,#000d)}.project>b{position:absolute;z-index:2;right:18px;top:18px;font-size:10px;letter-spacing:.2em}.projectInfo{position:absolute;z-index:2;left:28px;bottom:27px}.projectInfo p{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:#aeb7c4}.projectInfo h3{font-size:25px;margin:8px 0}.projectInfo span{font-size:10px;color:#adb1b7}.note{font-size:10px;color:#6c7176;margin-top:18px}.services{background:#07090d;display:grid;grid-template-columns:1fr 1.35fr;gap:9vw}.servicesIntro{position:sticky;top:80px;align-self:start}.servicesIntro h2{margin:28px 0 36px}.serviceList article{display:grid;grid-template-columns:45px 1fr 25px;gap:20px;border-top:1px solid #ffffff20;padding:30px 0}.serviceList article:last-child{border-bottom:1px solid #ffffff20}.serviceList span{font-size:10px;color:#6d7580}.serviceList h3{font-size:24px;margin:0 0 12px}.serviceList p{margin:0;color:#8d949c;line-height:1.65;font-size:14px}.serviceList b{color:#6c88ff;font-weight:400}.about{background:#10141a;display:grid;grid-template-columns:1fr 1fr;gap:9vw;align-items:center}.aboutVisual{height:630px;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 45%,#244bd8,transparent 20%),repeating-linear-gradient(100deg,transparent 0 12%,#1948ff70 12.3%,transparent 12.8% 20%),linear-gradient(145deg,#11192e,#030405 70%)}.aboutVisual:after{content:"";position:absolute;inset:0;background:linear-gradient(transparent,#0009)}.aboutVisual span{position:absolute;z-index:2;bottom:28px;left:28px;font-size:9px;line-height:1.7;letter-spacing:.2em;color:#a8b5db}.aboutCopy h2{margin:26px 0 38px}.tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}.tools span{border:1px solid #ffffff25;padding:10px 13px;font-size:9px;text-transform:uppercase;letter-spacing:.1em;color:#b8bec6}.contact{background:#e6e6e2;color:#0d0e10;display:grid;grid-template-columns:1fr 1fr;gap:9vw}.contact .kicker{color:#666}.contactTitle h2{margin:25px 0}.contactTitle h2 em{color:var(--blue)}.contactTitle>a{display:inline-block;margin-top:30px;font-weight:bold;border-bottom:1px solid}.contact form{display:grid;grid-template-columns:1fr 1fr;gap:22px}.contact label{font-size:9px;letter-spacing:.13em;text-transform:uppercase}.contact .full{grid-column:1/-1}.contact input,.contact select,.contact textarea{width:100%;border:0;border-bottom:1px solid #b6b7b4;background:transparent;border-radius:0;padding:14px 0;color:#111;font:14px Arial;margin-top:5px;outline:0}.contact input:focus,.contact select:focus,.contact textarea:focus{border-color:var(--blue)}.contact textarea{resize:vertical}.contact button{grid-column:1/-1;width:max-content;border:0}.success{grid-column:1/-1;color:#2145cc;font-size:13px}footer{min-height:165px;padding:42px 6vw;display:grid;grid-template-columns:1fr 2fr 1fr;gap:28px;align-items:center;border-top:1px solid #ffffff1c;background:#05070a;color:#858b93;font-size:9px;text-transform:uppercase;letter-spacing:.13em}footer .brand{color:#fff;text-transform:none;letter-spacing:-1.2px;font-size:22px}footer div{display:flex;gap:22px;justify-content:center}footer>span{text-align:right} @media(max-width:900px){nav{display:none}.hero h1{font-size:16vw}.statement,.statement>div,.services,.about,.contact{grid-template-columns:1fr}.statement>div{gap:20px}.projects{grid-template-columns:1fr}.project{height:450px}.servicesIntro{position:static}.aboutVisual{height:480px}.contact form{margin-top:20px}footer{grid-template-columns:1fr}footer div{justify-content:flex-start}footer>span{text-align:left}.section{padding:95px 6vw}} @media(max-width:560px){header{height:70px}.navCta{font-size:9px}.hero{min-height:700px}.hero h1{font-size:19vw}.lead{font-size:15px}.actions{flex-direction:column;width:max-content}.sectionHead{display:block}.sectionHead>p{margin-top:22px}.section h2{font-size:13vw}.contact form{grid-template-columns:1fr}.contact label{grid-column:1/-1}.project{height:390px}} .projectMeta{display:grid;grid-template-columns:2fr 1.2fr .5fr;border-top:1px solid #b9bbb8;border-bottom:1px solid #b9bbb8;margin:-20px 0 42px}.projectMeta>div{padding:20px 22px 20px 0;display:flex;flex-direction:column;gap:7px}.projectMeta>div+div{border-left:1px solid #b9bbb8;padding-left:22px}.projectMeta span{font-size:9px;letter-spacing:.18em;color:#73777b}.projectMeta b{font-size:12px;font-weight:600}.saulGallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.saulGallery figure{margin:0;height:430px;overflow:hidden;background:#0b0c0f}.saulGallery figure.wide{grid-column:span 2}.saulGallery figure.portrait{height:600px}.saulGallery img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s ease,filter .7s ease}.saulGallery figure:hover img{transform:scale(1.025);filter:brightness(1.08)}.photoCredit{text-align:right;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:#70757a;margin-top:14px}.contactTitle .instagram{display:block;width:max-content;margin-top:14px;font-size:12px;font-weight:400;color:#555;border-color:#999} @media(max-width:900px){.saulGallery{grid-template-columns:1fr 1fr}.saulGallery figure.wide{grid-column:span 2}.saulGallery figure,.saulGallery figure.portrait{height:430px}} @media(max-width:560px){.projectMeta{grid-template-columns:1fr}.projectMeta>div+div{border-left:0;border-top:1px solid #b9bbb8;padding-left:0}.saulGallery{grid-template-columns:1fr}.saulGallery figure.wide{grid-column:auto}.saulGallery figure,.saulGallery figure.portrait{height:420px}.saulGallery figure:first-child{height:280px}} .process{background:#0c1016}.process>.kicker{margin-bottom:40px}.processGrid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.processGrid article{background:#111720;padding-bottom:34px;overflow:hidden}.processGrid img{width:100%;height:440px;display:block;object-fit:cover;margin-bottom:28px}.processGrid article:first-child img{object-position:center 58%}.processGrid article:nth-child(2) img{object-position:center 55%}.processGrid span,.processGrid h3,.processGrid p{display:block;margin-left:30px;margin-right:30px}.processGrid span{font-size:9px;letter-spacing:.18em;color:#6f8cff}.processGrid h3{font-size:27px;margin-top:12px;margin-bottom:14px}.processGrid p{max-width:590px;color:#969da5;font-size:14px;line-height:1.75;margin-top:0;margin-bottom:0} @media(max-width:900px){.processGrid{grid-template-columns:1fr}.processGrid img{height:420px}} @media(max-width:560px){.processGrid img{height:300px}.processGrid span,.processGrid h3,.processGrid p{margin-left:22px;margin-right:22px}} .about{padding-top:0;padding-bottom:0}.aboutVisual{height:auto;min-height:880px;align-self:stretch}.aboutCopy{padding-top:125px;padding-bottom:125px} @media(max-width:900px){.aboutVisual{min-height:680px}.aboutCopy{padding-top:95px;padding-bottom:95px}} .servicesPhotos{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:42px}.servicesPhotos img{display:block;width:100%;height:330px;object-fit:cover;object-position:center;background:#030405}.servicesPhotos img:first-child{object-position:center 42%} @media(max-width:560px){.servicesPhotos img{height:270px}} .contactVisual{display:block;width:100%;max-width:590px;height:250px;object-fit:cover;margin:38px 0 4px;background:#05070a} @media(max-width:560px){.contactVisual{height:200px}} header .brand,header nav,header .navCta{color:#102a5c}header nav a:hover{color:#244f9d} .hero h1 em,.section h2 em,.statement h2 span,.serviceList b,.processGrid span,.success{color:#102a5c} .statementPhotos{grid-column:1/-1;display:grid;grid-template-columns:1.45fr 1fr;gap:12px;margin-top:36px}.statementPhotos img{display:block;width:100%;height:480px;object-fit:cover;background:#030405}.statementPhotos img:first-child{object-position:center}.statementPhotos img:last-child{object-position:center 58%} @media(max-width:560px){.statementPhotos{grid-template-columns:1fr}.statementPhotos img{height:330px}} .hero h1 em,.section h2 em,.statement h2 span,.serviceList b,.processGrid span,.success,header .brand,header nav,header .navCta{color:#68e5ff}header nav a:hover{color:#b8f5ff} .contactTitle{padding:56px;background:linear-gradient(90deg,#020713ed,#03152dc9),url('assets/contact-visual.jpeg') center/cover no-repeat;color:#fff}.contactTitle .kicker,.contactTitle>p{color:#d8e4ea}.contactTitle>a,.contactTitle .instagram{color:#fff;border-color:#ffffff90}.contactTitle h2 em{color:#68e5ff} @media(max-width:560px){.contactTitle{padding:34px 24px}} .work .sectionHead h2 em{color:#315cff} .contact{background:linear-gradient(90deg,#020713ed,#03152ddd),url('assets/contact-visual.jpeg') center/cover no-repeat;color:#fff}.contactTitle{padding:0;background:none}.contact .kicker,.contactTitle>p{color:#d8e4ea}.contact form{background:#0207139e;padding:38px}.contact label{color:#d8e4ea}.contact input,.contact select,.contact textarea{color:#fff;border-color:#ffffff70}.contact input::placeholder,.contact textarea::placeholder{color:#d8e4eaaa}.contact select option{color:#111;background:#fff} @media(max-width:560px){.contact form{padding:26px 20px}} .saulGallery video{display:block;width:100%;height:100%;object-fit:cover;background:#05070a} .formHoney{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important} .heroCredit{position:absolute;z-index:3;left:18px;bottom:16px;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:#aeb4bd}.heroCredit:hover{color:#fff} @media(max-width:560px){.heroCredit{left:12px;bottom:12px}.scroll{display:none}} .aboutVisual{background-image:linear-gradient(0deg,#030405c7,transparent 58%),url('assets/process-creation.jpeg');background-position:center;background-size:cover;background-repeat:no-repeat} .formStatus{grid-column:1/-1;margin:0;font-size:12px;line-height:1.6;color:#d8e4ea}.formStatus.ok{color:#8fb4ff}.formStatus.err{color:#ff9a9a}.contact button[disabled]{opacity:.55;cursor:progress} /* Kontrast hero textu na uzkych displejoch: horizontalny gradient stmavuje len lavu cast, na mobile text presahuje do fotky. */ @media(max-width:900px){ .heroBg{background:linear-gradient(180deg,#05070ad9 0%,#05070a8f 30%,#05070ae3 68%,#05070a 100%),url('assets/hero.png') center/cover no-repeat} .hero h1,.hero .lead,.hero .eyebrow{text-shadow:0 1px 14px rgba(5,7,10,.78)} } /* Hlavicka lezi nad fotkou - jemny scrim, aby bola navigacia citatelna aj ked je pod nou svetly reflektor. */ header{background:linear-gradient(180deg,#05070ab5 0%,#05070a5c 62%,transparent 100%)} nav a,.navCta,.brand{text-shadow:0 1px 10px rgba(5,7,10,.72)} /* Video v galerii je dekoracna slucka - ziadne ovladacie prvky */ .saulGallery video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none} .saulGallery video::-webkit-media-controls,.saulGallery video::-webkit-media-controls-enclosure{display:none!important} /* Footer ma styri polozky, ale tri stlpce - copyright preto padal do druheho riadku. Znacka a copyright patria pod seba vlavo. */ @media(min-width:901px){ footer{row-gap:10px} footer .brand{grid-column:1;grid-row:1;align-self:end} footer>span{grid-column:1;grid-row:2;text-align:left;align-self:start} footer p{grid-column:2;grid-row:1/3;margin:0;align-self:center} footer div{grid-column:3;grid-row:1/3;align-self:center;justify-content:flex-end} } /* Na mobile sa pri scrollovani schovava adresny riadok, tym rastie vyska viewportu - hero s vyskou 100vh sa zvacsi a pozadie (cover) sa prepocita, co vyzera ako roztiahnutie obrazka. Riesenie: hero drzi stabilnu svh (najmensi viewport), obrazok ma vysku lvh (najvacsi), takze sa pri schovani listy uz nema preco menit. Prebytok orezava overflow:hidden. */ @media(max-width:900px){ .hero{height:100svh;min-height:600px} .heroBg{height:100lvh;min-height:100%;bottom:auto} } /* Lucide ikony (inline SVG) namiesto unicode sipok - rovnaka hrubka ttahu a zarovnanie vo vsetkych velkostiach pisma. Farbu dedia z textu. */ .ico{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.14em} .navCta .ico,.contactTitle a .ico,.contact button .ico{width:1.15em;height:1.15em;margin-left:.35em} .serviceList b .ico{width:19px;height:19px;stroke-width:1.8} .scroll .ico{width:12px;height:12px;margin-left:.4em;vertical-align:-.2em} .contact button{display:inline-flex;align-items:center} /* Odstavce mali default margin 1em (15px), co je menej ako riadkovanie (1.8 = 27px) - odstavce preto splyvali. Vlastny rytmus je citatelnejsi. */ .aboutCopy>p,.contactTitle>p,.statement div>p,.servicesIntro>p{margin:0} .aboutCopy>p+p,.contactTitle>p+p,.statement div>p+p,.servicesIntro>p+p{margin-top:22px} /* Sekcia "Ako pracujem" mala prvy stlpec rezervovany len pre kicker, cim sa cely obsah odsadil od laveho okraja. Kicker patri nad nadpis. */ @media(min-width:901px){ .statement{grid-template-columns:1fr;gap:0} .statement>.kicker{margin:0 0 26px} } /* ---------- Kontakt: informacie ---------- Bez podciarknutia - e-mail a Instagram ako samostatne riadky s ikonou, podfarbenie a posun sipky az pri hoveri. */ .contactTitle>a,.contactTitle .instagram{ display:flex;align-items:center;gap:10px;width:max-content; border-bottom:0;border:1px solid #ffffff1f;border-radius:10px; padding:12px 16px;background:#ffffff0a;color:#fff; font-weight:500;letter-spacing:0;text-transform:none; transition:background .2s ease,border-color .2s ease} .contactTitle>a{margin-top:30px;font-size:16px} .contactTitle .instagram{margin-top:10px;font-size:14px;color:#c8d2da;font-weight:400} .contactTitle>a:hover,.contactTitle .instagram:hover{background:#ffffff14;border-color:#68e5ff59} .contactTitle>a .ico,.contactTitle .instagram .ico{ margin-left:auto;opacity:.7;transition:transform .2s ease,opacity .2s ease} .contactTitle>a:hover .ico,.contactTitle .instagram:hover .ico{transform:translate(2px,-2px);opacity:1} /* ---------- Kontakt: formularove komponenty ---------- Vizualny jazyk shadcn/ui prepisany do cistej CSS: jednotna vyska, zaoblenie 8px, jemne orámovanie, tlmeny popisok, focus ring. */ .contact form{gap:18px} .contact label{ display:flex;flex-direction:column;gap:7px; font-size:11px;letter-spacing:.04em;text-transform:none; font-weight:500;color:#e2e9ee} .contact input,.contact select,.contact textarea{ width:100%;margin-top:0; min-height:42px;padding:10px 13px; border:1px solid #ffffff26;border-radius:8px; background:#ffffff0d;color:#fff; font:14px/1.45 Arial,Helvetica,sans-serif; outline:0;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease} .contact input::placeholder,.contact textarea::placeholder{color:#ffffff5c} .contact input:hover,.contact select:hover,.contact textarea:hover{border-color:#ffffff3d} .contact input:focus-visible,.contact select:focus-visible,.contact textarea:focus-visible, .contact input:focus,.contact select:focus,.contact textarea:focus{ border-color:#68e5ff;box-shadow:0 0 0 3px #68e5ff2e;background:#ffffff12} .contact textarea{min-height:120px;padding-top:12px;resize:vertical} /* select: skryty nativny sipka, vlastna (lucide chevron-down) */ .contact select{ appearance:none;-webkit-appearance:none;padding-right:38px;cursor:pointer; background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='.65'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 12px center;background-size:16px} .contact select:invalid{color:#ffffff5c} .contact select option{color:#0d0e10;background:#f4f6f8} /* tlacidlo v rytme poli */ .contact button{min-height:44px;border-radius:8px;padding:0 20px;letter-spacing:.1em} /* ---------- Custom select (shadcn-style) ---------- Natívny