:root{ --hd:"Helvetica Neue",Helvetica,Arial,sans-serif; }
    html{scroll-behavior:smooth}
    body{font-family:Manrope,sans-serif;color:hsl(var(--foreground));background:hsl(var(--background))}
    .hd{font-family:var(--hd)}
    .wrap{max-width:1400px;margin:0 auto;padding:0 24px}
    .eyebrow{font-size:13px;letter-spacing:.3em;text-transform:uppercase;font-weight:500;color:#565656}
    section{position:relative}

    /* ===== Preloader ===== */
    #pre{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:hsl(var(--background));transition:transform .6s cubic-bezier(.76,0,.24,1)}
    #pre.done{transform:translateY(-100%)}
    #pre .pcount{font-family:var(--hd);font-weight:800;font-size:25vw;line-height:1;letter-spacing:-.04em;color:hsl(var(--foreground))}
    @media(min-width:768px){#pre .pcount{font-size:18vw}}
    #pre .pbarwrap{position:absolute;bottom:32%;left:50%;transform:translateX(-50%);width:180px;height:2px;background:hsl(var(--foreground)/.12);overflow:hidden}
    #pre .pbar{height:100%;width:0;background:hsl(var(--primary))}
    #pre .ptxt{position:absolute;bottom:28%;left:50%;transform:translateX(-50%);font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:hsl(var(--muted-foreground))}

    /* ===== Hero ===== */
    #hero{min-height:100vh;display:flex;align-items:center;overflow:hidden}
    /* Mobile: menšia medzera navrchu — obsah bližšie k navbaru.
       !important, lebo základné .hero-in pravidlo je v CSS nižšie. */
    @media(max-width:767px){
      #hero{min-height:auto;align-items:flex-start}
      .hero-in{padding-top:2.25rem !important;padding-bottom:2.5rem}
      .hero-sub{margin-top:2.5rem}
    }
    .hero-tri{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:0;will-change:transform}
    .hero-tri img{width:35vw;height:35vw;max-width:400px;max-height:400px;opacity:.25;filter:drop-shadow(0 0 60px hsl(355 78% 48%/.4));animation:spin360 60s linear infinite}
    .hero-in{position:relative;z-index:10;padding-top:9rem;width:100%}
    .hero-h1{font-family:var(--hd);font-weight:800;font-size:11vw;line-height:1.15;letter-spacing:-.05em;margin:24px 0 0}
    @media(min-width:768px){.hero-h1{font-size:10vw}}
    @media(min-width:1024px){.hero-h1{font-size:8vw}}
    .hero-h1 .ln{display:block;overflow:hidden}
    .hero-h1 .ln i{display:block;font-style:normal;transform:translateY(110%) skewY(7deg);animation:lineUp .8s cubic-bezier(.16,1,.3,1) forwards}
    .hero-h1 .ln:nth-child(2) i{animation-delay:.08s}
    .hero-h1 .ln:nth-child(3) i{animation-delay:.16s}
    .hero-sub{display:flex;flex-direction:column;gap:2rem;margin-top:4rem;opacity:0;animation:fadeIn .8s .5s forwards}
    @media(min-width:768px){.hero-sub{flex-direction:row;align-items:flex-end;justify-content:space-between}}
    .hero-sub p{max-width:32rem;font-size:clamp(18px,2vw,24px);font-weight:600;line-height:1.5}
    .hero-sub p span{color:hsl(var(--muted-foreground));font-weight:500}
    .hero-cta{flex-shrink:0;width:128px;height:128px;border-radius:50%;border:2px solid hsl(var(--foreground));display:flex;align-items:center;justify-content:center;text-align:center;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;line-height:1.2;cursor:pointer;background:transparent;color:hsl(var(--foreground));transition:background .3s,color .3s;will-change:transform}
    @media(min-width:768px){.hero-cta{width:160px;height:160px}}
    .hero-cta:hover{background:hsl(var(--foreground));color:hsl(var(--background))}
    .hero-scroll{position:absolute;bottom:48px;left:50%;transform:translateX(-50%);width:1px;height:64px;background:hsl(var(--foreground)/.3);overflow:hidden;opacity:0;animation:fadeIn .6s 1s forwards}
    .hero-scroll::after{content:"";position:absolute;left:0;width:100%;height:40%;background:hsl(var(--primary));animation:scrollLine 2s ease-in-out infinite}

    /* ===== Services ===== */
    #sluzby{padding:64px 0}
    .svc-head{margin-bottom:3rem}
    .svc-stack{display:flex;flex-direction:column;gap:2rem}
    .svc-card{position:relative;padding:2rem;display:flex;flex-direction:column;justify-content:space-between;min-height:auto;overflow:hidden}
    .svc-bg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;opacity:.05;overflow:hidden}
    .svc-bg span{font-family:var(--hd);font-weight:800;font-size:30vw;white-space:nowrap}
    .svc-num{font-family:var(--hd);font-weight:800;font-size:3rem;color:hsl(var(--primary))}
    .svc-ico{width:40px;height:40px;border-radius:50%;border:2px solid hsl(var(--foreground)/.2);display:flex;align-items:center;justify-content:center}
    .svc-card h3{font-family:var(--hd);font-weight:800;font-size:1.5rem;letter-spacing:-.01em;margin:1rem 0}
    .svc-card p{position:relative;z-index:1;line-height:1.6}
    /* desktop horizontal scroll */
    @media(min-width:768px){
      #sluzby{padding:0;height:400vh}
      .svc-sticky{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;overflow:hidden}
      .svc-head{padding:0 24px;margin-bottom:2rem;max-width:1400px;margin-left:auto;margin-right:auto;width:100%}
      .svc-stack{flex-direction:row;gap:2rem;padding-left:24px;will-change:transform}
      .svc-card{flex-shrink:0;width:46vw;min-height:60vh;padding:3rem}
      .svc-bg span{font-size:20vw}
      .svc-num{font-size:5rem}
      .svc-ico{width:48px;height:48px}
      .svc-card h3{font-size:2.5rem;margin:1.5rem 0}
      .svc-card p{font-size:1.125rem;max-width:28rem}
    }
    @media(min-width:1024px){.svc-card{width:40vw}.svc-card h3{font-size:3rem}}

    /* ===== Portfolio ===== */
    #portfolio{padding:64px 0}
    .pf-title{font-family:var(--hd);font-weight:800;font-size:clamp(56px,12vw,150px);line-height:.95;letter-spacing:-.04em;margin:1rem 0 0}
    .pf-list{display:flex;flex-direction:column;gap:1.5rem;max-width:1100px;margin:3rem auto 0;padding-bottom:18vh}
    .pf-card{position:relative;cursor:pointer;background:hsl(var(--background));border:1px solid hsl(var(--foreground)/.1);padding:12px;box-shadow:0 -8px 40px rgba(0,0,0,.07)}
    @media(min-width:768px){.pf-card{padding:16px;position:sticky}}
    .pf-imgwrap{position:relative;height:44vh;overflow:hidden}
    @media(min-width:768px){.pf-imgwrap{height:62vh}}
    .pf-imgwrap img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .6s cubic-bezier(.16,1,.3,1)}
    .pf-card:hover .pf-imgwrap img{transform:scale(1.05)}
    .pf-tri{position:absolute;top:50%;left:50%;width:96px;height:96px;transform:translate(-50%,-50%);opacity:.15;pointer-events:none;transition:.6s}
    .pf-card:hover .pf-tri{opacity:.4;transform:translate(-50%,-50%) scale(2) rotate(180deg)}
    .pf-over{position:absolute;inset:0;background:hsl(var(--primary));display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .4s}
    .pf-card:hover .pf-over{opacity:.92}
    .pf-over span{width:140px;height:140px;border-radius:50%;border:2px solid hsl(var(--primary-foreground)/.5);display:flex;align-items:center;justify-content:center;color:hsl(var(--primary-foreground));font-family:var(--hd);font-weight:700;font-size:1.1rem;text-transform:uppercase;letter-spacing:.2em}
    .pf-cap{position:absolute;left:0;right:0;bottom:0;padding:1.5rem;display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;background:linear-gradient(to top,hsl(var(--background)),hsl(var(--background)/.6),transparent);pointer-events:none}
    .pf-cap .tag{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:hsl(var(--muted-foreground))}
    .pf-cap h3{font-family:var(--hd);font-weight:700;font-size:clamp(1.5rem,4vw,2.25rem);margin-top:.25rem}
    .pf-cap .no{width:48px;height:48px;border-radius:50%;border:1px solid hsl(var(--foreground)/.2);display:flex;align-items:center;justify-content:center;background:hsl(var(--background)/.7);font-size:12px;font-weight:700;flex-shrink:0}

    /* ===== About ===== */
    #o-nas{padding:64px 0;overflow:hidden}
    .ab-grid{display:grid;gap:3rem;align-items:center}
    @media(min-width:1024px){.ab-grid{grid-template-columns:6fr 1fr 5fr}}
    .ab-h2{font-family:var(--hd);font-weight:800;font-size:clamp(40px,7vw,72px);line-height:1;letter-spacing:-.04em;margin:0 0 1.5rem}
    .ab-lead{font-size:clamp(20px,2.4vw,24px);font-weight:500;line-height:1.5;color:hsl(var(--foreground)/.8);margin-bottom:2.5rem;max-width:36rem}
    .ab-p{font-size:clamp(16px,1.6vw,18px);line-height:1.7;color:hsl(var(--muted-foreground));margin-bottom:1.5rem;max-width:36rem}
    .ab-p b{color:hsl(var(--foreground));font-weight:600}
    .ab-stats{display:grid;grid-template-columns:1fr;gap:1rem;margin-top:3rem;padding-top:2rem;border-top:1px solid hsl(var(--border)/.4)}
    @media(min-width:640px){.ab-stats{grid-template-columns:repeat(3,1fr);gap:2rem}}
    .ab-stat .num{font-family:var(--hd);font-weight:800;font-size:clamp(2.5rem,5vw,4rem);color:hsl(var(--primary));font-variant-numeric:tabular-nums}
    .ab-stat .lbl{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:hsl(var(--muted-foreground))}
    .ab-visual{position:relative;height:50vh;min-height:340px}
    @media(min-width:1024px){.ab-visual{height:64vh}}
    #abBox{position:absolute;inset:0;overflow:hidden}
    #abBox img{position:absolute;width:60px;height:60px;pointer-events:none;will-change:transform}
    .ab-deco1{position:absolute;top:2rem;right:2rem;width:6rem;height:6rem;border-radius:50%;border:2px solid hsl(var(--foreground)/.1)}
    .ab-deco2{position:absolute;bottom:3rem;left:3rem;width:4rem;height:4rem;border-radius:50%;background:hsl(var(--primary)/.1)}
    .ab-hint{position:absolute;bottom:1rem;left:50%;transform:translateX(-50%);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:hsl(var(--muted-foreground)/.5)}

    /* ===== Testimonials ===== */
    #ref{padding:64px 0;overflow:hidden}
    .tm-grid{display:grid;gap:2rem;align-items:center}
    @media(min-width:1024px){.tm-grid{grid-template-columns:1fr 1fr;gap:4rem}}
    .tm-card{position:relative;padding:2rem;overflow:hidden}
    @media(min-width:768px){.tm-card{padding:3rem}}
    .tm-quote{font-size:clamp(1.25rem,2.4vw,1.875rem);font-weight:500;line-height:1.5;margin-bottom:2rem}
    .tm-author{display:flex;align-items:center;gap:1rem}
    .tm-av{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,hsl(var(--primary)/.2),hsl(var(--primary)/.4));display:flex;align-items:center;justify-content:center;color:hsl(var(--primary));font-family:var(--hd);font-weight:700;font-size:1.25rem}
    .tm-author cite{font-family:var(--hd);font-weight:700;font-size:1.125rem;font-style:normal;display:block}
    .tm-author .role{font-size:14px;color:hsl(var(--muted-foreground))}
    .tm-side{display:flex;flex-direction:column;gap:2rem}
    .tm-mini{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
    .tm-mini .box{padding:1.5rem}
    .tm-mini .box span{font-family:var(--hd);font-weight:800;font-size:clamp(2rem,4vw,3rem);color:hsl(var(--primary))}
    .tm-mini .box p{font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:hsl(var(--muted-foreground));margin-top:.5rem}
    .tm-nav{display:flex;align-items:center;justify-content:space-between}
    .tm-dots{display:flex;gap:.5rem;align-items:center}
    .tm-dot{height:4px;border-radius:2px;background:hsl(var(--foreground)/.2);width:16px;border:0;padding:0;cursor:pointer;transition:width .3s,background .3s}
    .tm-dot.on{width:48px;background:hsl(var(--primary))}
    .tm-arrows{display:flex;gap:1rem}
    .tm-arrows button{width:48px;height:48px;border-radius:50%;border:1px solid hsl(var(--foreground)/.2);background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.2s;color:hsl(var(--foreground))}
    .tm-arrows button:hover{background:hsl(var(--foreground));color:hsl(var(--background))}

    /* ===== Contact ===== */
    #kontakt{padding:64px 0}
    .ct-h2{font-family:var(--hd);font-weight:800;font-size:clamp(56px,10vw,140px);line-height:.95;letter-spacing:-.04em;margin:0 0 3rem}
    .ct-form{max-width:48rem}
    .ct-row{display:grid;gap:2rem;margin-bottom:2rem}
    @media(min-width:768px){.ct-row{grid-template-columns:1fr 1fr}}
    .ct-field label{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:hsl(var(--muted-foreground));margin-bottom:.5rem;display:block}
    .ct-field input,.ct-field select,.ct-field textarea{width:100%;background:transparent;border:0;border-bottom:1px solid hsl(var(--foreground)/.3);padding:.5rem 0;font-family:Manrope,sans-serif;font-size:1rem;color:hsl(var(--foreground));outline:none;transition:border-color .2s}
    .ct-field input:focus,.ct-field select:focus,.ct-field textarea:focus{border-color:hsl(var(--primary))}
    .ct-field textarea{resize:none}
    .ct-submit{background:hsl(var(--foreground));color:hsl(var(--background));font-family:var(--hd);font-weight:700;font-size:1.125rem;text-transform:uppercase;letter-spacing:.05em;padding:1.25rem 4rem;border:0;cursor:pointer;transition:background .3s;will-change:transform}
    .ct-submit:hover{background:hsl(var(--primary))}
    .ct-submit:disabled{opacity:.5;cursor:not-allowed}
    .ct-note{font-size:12px;color:hsl(var(--muted-foreground));margin-top:1rem}
    .ct-ok{display:none}
    .ct-ok h3{font-family:var(--hd);font-weight:700;font-size:2.5rem;margin:0 0 1rem}
    .ct-ok p{font-size:1.25rem;color:hsl(var(--muted-foreground))}

    /* ===== Footer ===== */
    .ft{padding:3rem 0;border-top:1px solid hsl(var(--foreground)/.1)}
    .ft-in{display:flex;flex-direction:column;align-items:center;gap:2rem}
    @media(min-width:768px){.ft-in{flex-direction:row;justify-content:space-between}}
    .ft-copy{font-family:var(--hd);font-size:13px;text-transform:uppercase;letter-spacing:.05em;color:hsl(var(--muted-foreground))}
    .ft-soc{display:flex;gap:1.5rem}
    .ft-soc a{color:hsl(var(--muted-foreground));transition:color .2s}
    .ft-soc a:hover{color:hsl(var(--primary))}
    .ft-links{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem 1.25rem}
    .ft-links a{font-size:14px;color:hsl(var(--muted-foreground));text-decoration:none;transition:color .2s}
    .ft-links a:hover{color:hsl(var(--primary))}

    .ft-nav{display:grid;grid-template-columns:1fr;gap:2rem;padding-bottom:2.5rem;margin-bottom:2.5rem;border-bottom:1px solid hsl(var(--foreground)/.1)}
    @media(min-width:768px){.ft-nav{grid-template-columns:repeat(3,1fr);gap:3rem}}
    .ft-nav h3{font-family:var(--hd);font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.05em;margin:0 0 1.1rem;color:hsl(var(--foreground))}
    .ft-nav a,.ft-nav span{display:block;font-size:14px;line-height:2;color:hsl(var(--muted-foreground));text-decoration:none}
    .ft-nav a{transition:color .2s}
    .ft-nav a:hover{color:hsl(var(--primary))}

    @keyframes lineUp{to{transform:translateY(0) skewY(0)}}
    @keyframes fadeIn{to{opacity:1}}
    @keyframes spin360{to{transform:rotate(360deg)}}
    @keyframes scrollLine{0%{top:-40%}100%{top:100%}}
    .reveal{opacity:0;transform:translateY(40px);transition:opacity .7s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1)}
    .reveal.in{opacity:1;transform:none}
    @media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important}.reveal{opacity:1;transform:none}.hero-h1 .ln i{transform:none}}

/* Prepínač jazykov v navbare (SK/EN/DE) */
.asnav-lang{display:inline-flex;align-items:center;gap:4px;margin-left:6px}
.asnav-lang a{font-family:Manrope,sans-serif;font-size:13px;font-weight:600;color:hsl(var(--muted-foreground));text-decoration:none;padding:3px 5px;border-radius:4px;letter-spacing:.02em}
.asnav-lang a.on{color:hsl(var(--primary))}
.asnav-lang a:hover{color:hsl(var(--foreground))}
@media(max-width:980px){.asnav-lang{margin:8px 0 0}.asnav-lang a{font-size:18px;padding:6px 10px}}