/* TIGRID s.r.o. — návrh nového webu. Jazyk Moja samospráva (sklo, plávajúce pole, pilulky), farby značky TIGRID. */
:root{
  --bg:#F6F4F0;--ink:#1B1B1F;--ink2:#5A5A64;
  --pri:#C8151B;--act:#E31E24;--act-h:#B8151B;--act-sh:rgba(227,30,36,.32);
  --sand:#E9D9C3;--stone:#CBD1D8;--spk:#E31E24;--ok:#12805C;
  --g1:rgba(255,255,255,.74);--g2:rgba(255,255,255,.38);--rim:rgba(255,255,255,.95);--rim2:rgba(255,255,255,.55);--rim3:rgba(255,255,255,.7);
  --chip:rgba(255,255,255,.72);--hair:color-mix(in srgb,var(--ink) 10%,transparent);--hair2:color-mix(in srgb,var(--ink) 14%,transparent);
  --shade:rgba(60,40,30,.13);--glow:rgba(255,255,255,.75);--fo:.42;
  --disp:"Bricolage Grotesque",system-ui,sans-serif;--body:Figtree,system-ui,sans-serif;--ez:cubic-bezier(.16,1,.3,1)
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{font:400 19px/1.5 var(--body);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--act);color:#fff}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
:focus-visible{outline:3px solid var(--pri);outline-offset:3px;border-radius:14px}
h1,h2,h3{font-family:var(--disp);font-weight:700;letter-spacing:-.03em;line-height:1.02;text-wrap:balance}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}

/* living colour field: concrete grey, sand, a spark of red */
.field{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--bg)}
.field i{position:absolute;border-radius:50%;filter:blur(90px);opacity:calc(var(--fo)*var(--k,1));animation:drift var(--t,24s) ease-in-out infinite alternate;will-change:transform}
.field i:nth-child(1){width:46vw;height:46vw;left:-10vw;top:-12vw;background:var(--stone);--dx:16vw;--dy:10vh;--s:1.2}
.field i:nth-child(2){width:36vw;height:36vw;right:-8vw;top:6vh;background:var(--sand);--dx:-18vw;--dy:18vh;--s:.85;--t:19s}
.field i:nth-child(3){width:34vw;height:34vw;left:28vw;top:46vh;background:#fff;--k:1.4;--dx:12vw;--dy:-20vh;--s:1.3;--t:27s}
.field i:nth-child(4){width:22vw;height:22vw;right:10vw;bottom:-6vw;background:var(--spk);--k:.45;--dx:-22vw;--dy:-14vh;--s:1.15;--t:21s}
@keyframes drift{to{transform:translate(var(--dx),var(--dy)) scale(var(--s))}}

.glass{position:relative;background:linear-gradient(140deg,var(--g1),var(--g2));backdrop-filter:blur(28px) saturate(1.6);-webkit-backdrop-filter:blur(28px) saturate(1.6);border-radius:32px;box-shadow:inset 0 1.5px 0 var(--rim),inset 0 0 0 1px var(--rim2),inset 0 -14px 24px -14px var(--rim3),0 24px 60px var(--shade);overflow:hidden}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:0 28px;border-radius:999px;background:var(--act);color:#fff;font:600 18px var(--body);border:0;cursor:pointer;box-shadow:inset 0 1.5px 0 rgba(255,255,255,.4),0 10px 26px var(--act-sh);transition:transform .25s var(--ez),background .2s}
.btn:hover{transform:translateY(-2px) scale(1.02);background:var(--act-h)}
.btn.g{background:var(--chip);color:var(--ink);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:inset 0 1.5px 0 var(--rim),inset 0 0 0 1px var(--rim2),0 10px 26px var(--shade)}
.row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.skip{position:absolute;left:16px;top:-80px;z-index:99;background:var(--act);color:#fff;padding:12px 18px;border-radius:999px;font-weight:600}
.skip:focus{top:16px}
.js [data-rv]{opacity:0;transform:translateY(28px);filter:blur(8px);transition:opacity .9s var(--ez),transform .9s var(--ez),filter .9s var(--ez);transition-delay:calc(var(--i,0)*90ms)}
.js [data-rv].in{opacity:1;transform:none;filter:none}

/* floating pill bar with the real logo */
.bar{position:sticky;top:14px;z-index:50;width:min(1080px,calc(100% - 24px));margin:14px auto 0;display:flex;align-items:center;gap:6px;padding:8px 8px 8px 18px;border-radius:999px}
.bar .logo{flex:none;display:flex;align-items:center}.bar .logo img{height:30px;width:auto;aspect-ratio:540/70}.bar .wm{display:none;font:700 20px/1 var(--disp);letter-spacing:-.02em;color:var(--pri)}
.bar .call{display:none;width:44px;height:44px;border-radius:50%;background:var(--chip);color:var(--ink);place-items:center;box-shadow:inset 0 0 0 1px var(--rim2)}
.bar nav{margin-left:auto;display:flex}
.bar nav a{padding:11px 14px;border-radius:999px;font-size:16px;font-weight:500;transition:background .2s}
.bar nav a:hover,.bar nav a.on{background:var(--chip)}
.bar .tel{font-weight:600;font-size:16px;padding:11px 14px;white-space:nowrap}
.bar .btn{min-height:44px;padding:0 20px;font-size:16px}
.bar .burger{display:none;width:44px;height:44px;border-radius:50%;border:0;background:var(--chip);color:var(--ink);cursor:pointer;place-items:center}
.mnav{display:none;position:fixed;left:12px;right:12px;top:84px;z-index:49;padding:14px;flex-direction:column;gap:2px}
.mnav a:not(.btn){padding:16px 20px;border-radius:18px;font-size:19px;font-weight:600}
.mnav .btn{margin-top:12px}
.mnav a:hover{background:var(--chip)}
.mnav.open{display:flex}

/* hero */
.hero{text-align:center;padding:72px 0 0}
.kicker{display:inline-flex;align-items:center;gap:10px;padding:8px 16px 8px 10px;border-radius:999px;background:var(--chip);box-shadow:inset 0 0 0 1px var(--rim2);font-size:15px;font-weight:600;color:var(--ink2);margin-bottom:28px}
.kicker b{width:26px;height:26px;border-radius:50%;background:var(--act);color:#fff;display:grid;place-items:center}.kicker b svg{width:14px;height:14px}
.hero h1{font-size:clamp(44px,6.8vw,80px);letter-spacing:-.045em;line-height:.96;max-width:11em;margin:0 auto}
.hero h1 b{font-weight:700;color:var(--pri)}
.hero h1 i{font-style:normal;color:var(--spk)}
.hero p{font-size:clamp(19px,2vw,24px);color:var(--ink2);max-width:27em;margin:24px auto 28px;font-weight:500;line-height:1.4}

/* configurator window: pick what you build, see what is included */
.win{max-width:900px;margin:64px auto 0;padding:26px 30px 28px;text-align:left}
.tabs{display:flex;gap:8px;flex-wrap:wrap}
.tabs button{border:0;cursor:pointer;padding:11px 18px;border-radius:999px;background:transparent;color:var(--ink2);font:600 16px var(--body);transition:background .2s,color .2s}
.tabs button:hover{background:var(--chip)}
.tabs button[aria-selected=true]{background:var(--act);color:#fff;box-shadow:0 8px 20px var(--act-sh)}
.pane{display:none;grid-template-columns:1.2fr .8fr;gap:32px;margin-top:24px;align-items:center}
.pane.on{display:grid}
.pane .h3{font-size:28px;letter-spacing:-.02em;margin-bottom:12px}
.pane ul{list-style:none;padding:0}
.pane li{padding:11px 0 11px 22px;border-top:1px solid var(--hair);position:relative;font-size:17.5px}
.pane li:before{content:"";position:absolute;left:2px;top:21px;width:8px;height:8px;border-radius:50%;background:var(--spk)}
.pane .ph{border-radius:22px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 14px 34px var(--shade)}
.pane .ph img{width:100%;height:100%;object-fit:cover}
.win-note{font-size:14.5px;color:var(--ink2);margin-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}

.sec{padding:130px 0 0}
h2.big{font-size:clamp(36px,5vw,68px);text-align:center;margin:0 auto 56px;max-width:14em}
h2.big b{font-weight:700;color:var(--pri)}
.sub{font-size:clamp(19px,1.8vw,22px);color:var(--ink2);font-weight:500;max-width:32em;margin:-32px auto 52px;text-align:center;line-height:1.45}

/* numbers on one sheet of glass */
.nums{display:grid;grid-template-columns:repeat(4,1fr);padding:14px 12px}
.nums div{padding:26px 28px;border-left:1px solid var(--hair)}
.nums div:first-child{border-left:0}
.nums b{display:block;font:700 clamp(40px,4.6vw,60px)/1 var(--disp);letter-spacing:-.04em}
.nums b i{font-style:normal;color:var(--spk)}
.nums span{display:block;margin-top:8px;color:var(--ink2);font-size:16px;font-weight:500;line-height:1.35}

/* services bento */
.bento{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.t{padding:32px 32px 30px;min-height:300px;display:flex;flex-direction:column;transition:transform .5s var(--ez)}
.t:hover{transform:translateY(-6px)}
.t h3{font-size:28px;margin-bottom:8px}
.t p{color:var(--ink2);font-size:17.5px;font-weight:500;max-width:22em;line-height:1.4}
.t .v{margin-top:auto;padding-top:26px}
.w2{grid-column:span 2}.w3{grid-column:span 3}.w4{grid-column:span 4}
.t.wide{grid-column:span 6;min-height:0;flex-direction:row;align-items:center;gap:40px;flex-wrap:wrap}
.t.wide>*{flex:1 1 300px}
.opt{display:inline-block;font-size:13.5px;font-weight:600;padding:5px 12px;border-radius:999px;background:var(--chip);margin-bottom:12px;color:var(--pri)}
.t .pic{border-radius:18px;overflow:hidden;aspect-ratio:16/9;box-shadow:0 10px 24px var(--shade)}
.t .pic img{width:100%;height:100%;object-fit:cover}
.roof{display:flex;align-items:flex-end;gap:6px;height:96px}
.roof i{flex:1;border-radius:6px 6px 0 0;background:linear-gradient(var(--sand),var(--stone));height:calc(var(--h)*1%);animation:grow 1.8s var(--ez) both}
.roof i:nth-child(odd){background:linear-gradient(var(--stone),var(--sand))}
@keyframes grow{from{height:0}}
.lines i{display:block;height:12px;border-radius:6px;background:var(--hair2);margin-top:12px;transform-origin:left;animation:write 4.5s var(--ez) infinite}
.lines i:nth-child(2){width:86%;animation-delay:.25s}.lines i:nth-child(3){width:64%;animation-delay:.5s;background:var(--pri)}.lines i:nth-child(4){width:92%;animation-delay:.75s}.lines i:nth-child(5){width:48%;animation-delay:1s}
@keyframes write{0%{transform:scaleX(0)}30%,90%{transform:scaleX(1)}100%{transform:scaleX(1);opacity:0}}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{font-size:14.5px;font-weight:600;padding:8px 14px;border-radius:999px;background:var(--chip);box-shadow:inset 0 0 0 1px var(--rim2);color:var(--ink2)}
.temp{display:flex;align-items:center;gap:16px;font-weight:600;font-size:17.5px}
.temp b{font:700 clamp(48px,4.5vw,64px)/1 var(--disp);color:var(--pri);white-space:nowrap;animation:bob 4s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(-8px) rotate(-4deg)}}

.state{padding:150px 0 20px;text-align:center}
.state p{font:700 clamp(36px,6.4vw,92px)/1 var(--disp);letter-spacing:-.045em;max-width:12em;margin:0 auto}
.state p span{color:var(--pri)}

/* process and audiences: rows on one glass sheet with hairlines */
.more{display:grid;grid-template-columns:1fr 1fr;gap:0 56px;padding:14px 44px}
.more div{padding:28px 0;border-top:1px solid var(--hair)}
.more div:nth-child(-n+2){border-top:0}
.more h3{font-size:25px;line-height:1.1;margin-bottom:10px}
.more h3 small{display:block;font:700 13px var(--body);color:var(--pri);letter-spacing:.06em;margin-bottom:10px}
.more p{color:var(--ink2);font-size:17.5px;font-weight:500;line-height:1.45}

/* story: photo beside text, small timeline with hairlines */
.story{display:grid;grid-template-columns:.9fr 1.1fr;gap:40px;padding:22px;align-items:center}
.story-ph{border-radius:24px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 14px 34px var(--shade)}
.story-ph img{width:100%;height:100%;object-fit:cover}
.story-tx{padding:8px 18px 8px 0}
.story-tx p{font-size:18px;color:var(--ink2);font-weight:500;line-height:1.5;margin-bottom:14px}
.tl{list-style:none;padding:0;margin-top:22px}
.tl li{display:grid;grid-template-columns:120px 1fr;gap:16px;padding:12px 0;border-top:1px solid var(--hair);font-size:16.5px;color:var(--ink2);font-weight:500}
.tl b{font:700 17px var(--disp);color:var(--pri);letter-spacing:-.01em}

/* references */
.refs{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.rf{display:block;padding:14px;transition:transform .5s var(--ez)}
.rf:hover{transform:translateY(-6px)}
.rf .ph{border-radius:22px;overflow:hidden;aspect-ratio:4/3}
.rf .ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ez)}
.rf:hover .ph img{transform:scale(1.04)}
.rf h3{font-size:21px;margin:16px 10px 4px;letter-spacing:-.02em}
.rf p{margin:0 10px 6px;color:var(--ink2);font-size:15.5px;font-weight:500}
.clients{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:36px}
.clients span{font:700 15px var(--disp);letter-spacing:.02em;padding:10px 18px;border-radius:999px;background:var(--chip);box-shadow:inset 0 0 0 1px var(--rim2);color:var(--ink2)}

/* contact */
.ct{display:grid;grid-template-columns:1fr 1fr;gap:48px;padding:44px 48px}
.ct h2{font-size:clamp(32px,4vw,52px);margin-bottom:14px;text-align:left}
.ct h2 b{color:var(--pri)}
.ct .lead{color:var(--ink2);font-weight:500;font-size:18px;line-height:1.45;margin-bottom:28px}
.ci{display:grid;gap:4px;padding:16px 0;border-top:1px solid var(--hair);font-size:17px}
.ci small{font-size:13.5px;font-weight:600;color:var(--ink2);letter-spacing:.04em}
.ci a{font-weight:600}
.ci a:hover{color:var(--pri)}
.form{display:grid;gap:12px}
.form .two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form label{display:grid;gap:6px;font-size:14.5px;font-weight:600;color:var(--ink2)}
.form input,.form textarea{width:100%;min-height:52px;border-radius:16px;border:0;background:var(--chip);box-shadow:inset 0 0 0 1px var(--rim2);padding:14px 16px;font:500 17px var(--body);color:var(--ink);resize:vertical}
.form input:focus,.form textarea:focus{outline:0;box-shadow:inset 0 0 0 2px var(--pri)}
.form .note{font-size:14px;color:var(--ink2)}

/* footer */
.foot{margin:140px auto 24px;padding:36px 44px;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
.foot img{height:28px;width:auto}
.foot p{color:var(--ink2);font-size:16px;font-weight:500;margin-top:14px;max-width:36ch;line-height:1.45}
.foot .h4{font:700 13px var(--body);letter-spacing:.06em;text-transform:none;color:var(--ink2);margin-bottom:10px}
.foot nav{display:grid;gap:8px;font-size:16.5px;font-weight:500}
.foot nav a:hover{color:var(--pri)}
.foot .tiny{grid-column:1/-1;border-top:1px solid var(--hair);padding-top:18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:14px;color:var(--ink2)}

/* references page */
.phero{text-align:center;padding:72px 0 0}
.phero h1{font-size:clamp(40px,6vw,72px);letter-spacing:-.045em;line-height:.98;max-width:13em;margin:0 auto}
.phero h1 b{color:var(--pri)}
.phero p{font-size:clamp(18px,1.9vw,22px);color:var(--ink2);max-width:30em;margin:22px auto 0;font-weight:500;line-height:1.4}
.gal{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:14px}
.gal a{border-radius:18px;overflow:hidden;aspect-ratio:4/3;display:block}
.gal img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ez)}
.gal a:hover img{transform:scale(1.05)}
.filter{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:-28px 0 40px}
.filter button{border:0;cursor:pointer;padding:11px 18px;border-radius:999px;background:var(--chip);color:var(--ink2);font:600 15.5px var(--body);box-shadow:inset 0 0 0 1px var(--rim2);transition:background .2s,color .2s}
.filter button[aria-pressed=true]{background:var(--ink);color:#fff}
.grp{padding:28px 44px 20px}
.grp+.grp{margin-top:18px}
.grp[hidden]{display:none}
.grp header{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-bottom:8px}
.grp h3{font-size:26px}
.grp header span{font-size:14.5px;font-weight:600;color:var(--ink2)}
.grp ul{list-style:none;padding:0;columns:2;column-gap:48px}
.grp li{break-inside:avoid;padding:12px 0 12px 22px;border-top:1px solid var(--hair);position:relative;font-size:17px;line-height:1.4}
.grp li:before{content:"";position:absolute;left:2px;top:21px;width:8px;height:8px;border-radius:50%;background:var(--spk)}
.grp li .y{font-size:13.5px;color:var(--ink2);font-weight:600;margin-left:6px;white-space:nowrap}
.cta{padding:44px 48px;display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center}
.cta h2{font-size:clamp(30px,4vw,52px);text-align:left;margin:0}
.cta h2 b{color:var(--pri)}

@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}.js [data-rv]{opacity:1;transform:none;filter:none}}
@media (max-width:960px){
  .bar nav,.bar .tel,.bar .btn,.bar .logo img{display:none}.bar .logo .wm{display:block}.bar .burger,.bar .call{display:grid}
  .bar{top:10px;margin-top:10px;padding:8px 8px 8px 20px;gap:8px}.bar .call{margin-left:auto}
  .story{grid-template-columns:1fr;padding:14px}.story-tx{padding:8px 10px 10px}
  .nums{grid-template-columns:1fr 1fr}.nums div:nth-child(3){border-left:0}
  .bento{grid-template-columns:repeat(2,1fr)}.w2,.w3,.w4{grid-column:span 1}.t.wide{grid-column:span 2}
  .more{grid-template-columns:1fr;padding:6px 28px}.more div:nth-child(2){border-top:1px solid var(--hair)}
  .refs{grid-template-columns:1fr 1fr}
  .ct{grid-template-columns:1fr;padding:30px 24px}
  .foot{grid-template-columns:1fr 1fr;padding:28px 24px}
  .gal{grid-template-columns:repeat(3,1fr)}
  .grp{padding:22px 24px 14px}.grp ul{columns:1}
  .cta{grid-template-columns:1fr;padding:30px 24px}
}
@media (max-width:600px){
  body{font-size:18px}
  .hero{padding-top:56px}.kicker{font-size:14px;padding:7px 14px 7px 8px;margin-bottom:24px}
  .hero h1{font-size:clamp(40px,12vw,48px)}.hero p{font-size:18px;margin:22px auto 30px}
  .row .btn{width:100%}.win{margin-top:48px}.pane{gap:22px;margin-top:20px}.pane h2.h3,.pane .h3{font-size:24px}
  .tabs{gap:6px}.tabs button{padding:10px 14px;font-size:15px}
  .nums div{padding:22px 18px}.t{padding:26px 22px 24px}.t h3{font-size:25px}
  .more{padding:4px 22px}.more h3{font-size:22px}
  .tl li{grid-template-columns:1fr;gap:4px}
  .sec{padding:96px 0 0}.state{padding:110px 0 10px}
  .win{padding:18px 18px 20px}.pane{grid-template-columns:1fr}
  .bento{grid-template-columns:1fr}.t.wide{grid-column:span 1}.t{min-height:0}
  .nums{grid-template-columns:1fr 1fr}
  .refs{grid-template-columns:1fr}
  .foot{grid-template-columns:1fr}
  .gal{grid-template-columns:repeat(2,1fr)}
  .form .two{grid-template-columns:1fr}
}