@font-face{font-family:"Satoshi";src:url(/assets/fonts/Satoshi-Regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url(/assets/fonts/Satoshi-Medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url(/assets/fonts/Satoshi-Bold.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Satoshi";src:url(/assets/fonts/Satoshi-Black.woff2) format("woff2");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Allura";src:url(/assets/fonts/Allura-400-latin-ext.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Allura";src:url(/assets/fonts/Allura-400-latin.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"DM Mono";src:url(/assets/fonts/DMMono-400-latin-ext.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"DM Mono";src:url(/assets/fonts/DMMono-400-latin.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"DM Mono";src:url(/assets/fonts/DMMono-500-latin-ext.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"DM Mono";src:url(/assets/fonts/DMMono-500-latin.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
/* Rozložení: web o šesti stránkách (úvod, čtyři aplikace, O nás). Každá stránka střídá grafitový a světlý pás, obří verzálky, strojopisné popisky v rozích. Barvy jsou firemní barvy Duckino ze současného webu. Jeden vlastní vzhled, proto bez tmavého režimu. */
:root{
  --black:#101011; --dark:#1f1f1f; --grey:#353535; --white:#fbfbfb; --paper:#f1f1ef; --paper-2:#e7e7e4;
  --orange:#ed5145; --muted-d:#a9a9ad; --muted-l:#5f5f63; --line-l:#cfcfcb; --line-d:#2e2e30;
  --display:"Satoshi","Helvetica Neue",Arial,sans-serif;
  --mono:"DM Mono",ui-monospace,Menlo,monospace;
  --script:"Allura","Brush Script MT",cursive;
  color-scheme:light;
}
*{box-sizing:border-box}
body{margin:0;background:var(--black);color:var(--white);font-family:var(--display);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--black)}
img{max-width:100%;display:block}
a{color:inherit}
.in{max-width:1320px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;line-height:1.45}
.caps{font-weight:700;font-size:13px;line-height:1.4;text-transform:uppercase;letter-spacing:.01em;max-width:38ch;margin:0}
.big{font-weight:900;text-transform:uppercase;letter-spacing:-.035em;line-height:1.02;margin:0;text-wrap:balance}
.sc{display:block;font-family:var(--script);font-weight:400;text-transform:none;letter-spacing:0;line-height:.8;color:var(--orange)}
.lnk{justify-self:start;align-self:start;width:max-content;display:inline-flex;gap:8px;align-items:center;font-weight:700;font-size:13px;text-transform:uppercase;text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:2px}
.lnk:hover{color:var(--orange)}
.btns{display:flex;flex-wrap:wrap;gap:12px 24px}
a:focus-visible,button:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.logo-ink{display:block;width:118px;aspect-ratio:600/118;background:currentColor;-webkit-mask:url(/assets/img/logo.png) center/contain no-repeat;mask:url(/assets/img/logo.png) center/contain no-repeat}
.ghost{position:absolute;font-family:var(--script);color:rgba(16,16,17,.05);line-height:.7;pointer-events:none;user-select:none;white-space:nowrap}
.dark .ghost,.hero .ghost{color:rgba(251,251,251,.04)}

/* ---------- navigace (sdílená) ---------- */
nav.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:9;background:rgba(16,16,17,.86);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--line-d)}
nav.top .in{display:grid;grid-template-columns:auto 1fr auto;gap:32px;align-items:center;padding-block:16px}
nav.top ul{list-style:none;margin:0;padding:0;display:flex;gap:26px;justify-content:center}
nav.top ul a,nav.top .cta{font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.03em;text-decoration:none;white-space:nowrap}
nav.top ul a{display:inline-flex;gap:8px;align-items:center;color:var(--muted-d)}
nav.top ul a:hover,nav.top ul a[aria-current="page"]{color:var(--white)}
nav.top ul a[aria-current="page"]::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--orange)}
nav.top .cta{display:flex;gap:8px;align-items:center}
nav.top .cta:hover{color:var(--orange)}
nav.top .cta i{width:6px;height:6px;border-radius:50%;background:var(--orange)}

/* ---------- stránky ---------- */
.page[hidden]{display:none}

/* ---------- úvod stránky ---------- */
.hero{position:relative;overflow:hidden;background:radial-gradient(55% 75% at 74% 46%,rgba(237,81,69,.22) 0%,rgba(237,81,69,0) 60%),radial-gradient(80% 100% at 70% 40%,#3a3a3c 0%,var(--dark) 45%,var(--black) 85%)}
.hero > .in{position:relative;min-height:min(800px,calc(100svh - 60px));display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:1fr auto;gap:0 24px;padding-block:72px 32px}
.hero-copy{align-self:center;display:grid;gap:22px;position:relative;z-index:2}
.hero h1{font-size:clamp(44px,5.3vw,84px)}
.hero h1 .sc{font-size:1.02em;text-align:right;margin-top:.06em;padding-right:.1em}
.hero-art{position:relative;min-height:520px}
.hero-art > *{position:absolute}
.hero-art > img{filter:drop-shadow(0 40px 50px rgba(0,0,0,.55))}
.hero-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:14px 0;position:relative;z-index:2;margin-top:28px}
.hero-foot div{padding:0 28px;border-left:1px solid rgba(251,251,251,.22)}
.hero-foot div:first-child{padding-left:0;border-left:0}
.hero-foot b{font-weight:500;color:var(--orange)}
.crumb{display:flex;gap:10px;align-items:center}
.crumb img{width:28px;height:28px;border-radius:7px}
.ipad{background:#0b0b0c;border-radius:16px;padding:9px;box-shadow:0 40px 60px -20px rgba(0,0,0,.6)}
.iphone{background:#0b0b0c;border-radius:16% / 7.4%;padding:3.6%;box-shadow:0 40px 60px -20px rgba(0,0,0,.65),inset 0 0 0 1.5px #3a3a3c}
.iphone img{border-radius:12% / 5.6%;width:100%}
.ipad img{border-radius:8px}

/* úvod domů */
.h-home .tab{width:84%;right:-4%;top:14%;transform:rotate(-4deg);z-index:2}
.h-home .tym{width:46%;left:-2%;top:-2%;transform:rotate(3deg);z-index:1;padding:7px;border-radius:14px}
.h-home .pho{width:25%;left:6%;bottom:-4%;transform:rotate(4deg);z-index:3}
.h-home .dro{width:21%;right:4%;bottom:-6%;transform:rotate(-3deg);z-index:3}
/* úvody aplikací */
.h-duk .tab{width:104%;right:-8%;top:50%;transform:translateY(-50%)}
.h-wol .pho{width:42%;left:30%;top:0}
.h-wol .note{left:2%;top:18%;width:min(340px,60%)}
.h-dro .pho{width:min(320px,42%);left:30%;top:0}
.h-tym .ipad{width:100%;right:-4%;top:50%;transform:translateY(-50%)}
.note{display:grid;grid-template-columns:auto 1fr auto;gap:2px 10px;align-items:center;background:rgba(251,251,251,.92);color:var(--black);border-radius:18px;padding:12px 14px;box-shadow:0 24px 40px rgba(0,0,0,.45);font-size:14px;line-height:1.3}
.note .ap{grid-row:span 2;width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,#ffd166,#ef476f 55%,#118ab2)}
.note .when{color:var(--muted-l);font-size:12px}
.note .msg{grid-column:2/4}

/* ---------- světlé pásy ---------- */
.paper{background:var(--paper);color:var(--black);position:relative;overflow:hidden}
.paper.alt{background:var(--paper-2)}
.dark{background:var(--black);color:var(--white);position:relative;overflow:hidden}
.band > .in{position:relative;padding-block:110px}

/* domů: aplikace */
.apps-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:28px;align-items:end;margin-bottom:44px}
.apps-head .mono{grid-column:1/-1;color:var(--muted-l)}
.apps-head h2{font-size:clamp(44px,6vw,88px)}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.card{position:relative;display:grid;grid-template-rows:auto 1fr auto auto auto;gap:14px;padding:14px;border:1px solid var(--line-l);background:rgba(255,255,255,.45);text-decoration:none;color:var(--black);transition:background .25s,border-color .25s}
.card:hover{background:#fff;border-color:var(--black)}
.card .n{display:flex;justify-content:space-between;color:var(--muted-l)}
.card .n em{font-style:normal;color:var(--orange)}
.card .ic{justify-self:center;align-self:center;width:46%;aspect-ratio:1;border-radius:24%;overflow:hidden;margin-block:34px 30px;box-shadow:0 26px 34px -18px rgba(16,16,17,.45);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.card:hover .ic{transform:translateY(-8px) rotate(-4deg)}
.card .ic img{width:100%;height:100%;object-fit:cover}
.card .nm{display:flex;justify-content:space-between;gap:8px;border-top:1px solid var(--line-l);padding-top:10px}
.card .nm b{font-weight:500;color:var(--black)}
.card p{margin:0;font-size:14px;line-height:1.4;color:var(--muted-l);min-height:3.6em}
.card .go{font-weight:700;font-size:12px;text-transform:uppercase;display:flex;justify-content:space-between}
.card:hover .go{color:var(--orange)}

/* co aplikace umí: velký seznam */
.feat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:40px}
.feat-head{display:grid;gap:18px;align-content:start}
.feat-head .mono{color:var(--muted-l)}
.feat-head h2{font-size:clamp(40px,4.8vw,72px)}
.feat ol{list-style:none;margin:0;padding:0;border-top:1px solid var(--line-l)}
.feat li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;align-items:baseline;padding:22px 0;border-bottom:1px solid var(--line-l)}
.feat li span{color:var(--muted-l)}
.feat li b{font-weight:900;font-size:clamp(22px,2.4vw,34px);letter-spacing:-.02em;text-transform:uppercase;line-height:1.15}

/* pro koho: slova za lomítky */
.who h2{font-size:clamp(34px,5.4vw,84px);font-weight:900;text-transform:uppercase;letter-spacing:-.035em;line-height:1.1;margin:18px 0 0;text-wrap:balance}
.who h2 i{font-style:normal;color:var(--orange);font-weight:500}
.photo{position:relative;margin:56px 0 0;max-width:1000px;border-radius:4px;overflow:hidden}
.photo img{width:100%;height:auto}
.photo figcaption{position:absolute;left:16px;bottom:14px;background:var(--black);color:var(--white);padding:6px 10px}

/* účtenka */
.rcpt > .in{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:40px;align-items:center}
.rcpt .bg{position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,16,17,.94) 0%,rgba(16,16,17,.6) 38%,rgba(16,16,17,.5) 52%,rgba(16,16,17,.9) 66%,rgba(16,16,17,.96) 100%),url(/assets/img/duktuk-gastro.webp) center/cover no-repeat;filter:grayscale(.35)}
.rcpt h2{font-size:clamp(40px,5vw,76px);max-width:9ch}
.rcpt .left{display:grid;gap:22px;align-self:start;padding-top:40px}
.rcpt .right{align-self:end;display:grid;gap:18px}
.rcpt .right .mono{color:#d6d6d8}
.printer{position:relative;width:340px;justify-self:center}
.printer .slot{height:26px;border-radius:8px;background:linear-gradient(#cfcfcd,#8f8f8c);box-shadow:0 10px 20px rgba(0,0,0,.45),inset 0 -6px 0 rgba(0,0,0,.25);position:relative;z-index:2}
.printer .slot::after{content:"";position:absolute;left:18px;right:18px;bottom:6px;height:3px;border-radius:3px;background:#1b1b1a}
.paperclip{overflow:hidden;margin:-8px 22px 0;padding-bottom:30px}
.receipt{background:#fdfdfb;color:var(--black);font-family:var(--mono);font-size:12px;line-height:1.55;padding:26px 22px 34px;
  -webkit-mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/14px 100%;mask:conic-gradient(from -45deg at bottom,#0000,#000 1deg 89deg,#0000 90deg) 50%/14px 100%}
.play .receipt{animation:print 2.4s steps(14) both}
@keyframes print{from{transform:translateY(-62%)}to{transform:none}}
.receipt .hd{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.receipt .row{display:flex;justify-content:space-between;gap:12px}
.receipt hr{border:0;border-top:1px dashed #9a9a96;margin:12px 0}
.receipt .stamps{display:flex;gap:5px;margin:8px 0 4px}
.receipt .stamps i{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--black)}
.receipt .stamps i.on{background:var(--black)}
.receipt .stamps i.new{background:var(--orange);border-color:var(--orange)}
.receipt .big2{font-family:var(--display);font-weight:900;font-size:17px;text-transform:uppercase;letter-spacing:-.01em;line-height:1.05;margin:4px 0 2px}
.receipt .bar{height:46px;margin-top:16px;background:repeating-linear-gradient(90deg,var(--black) 0 2px,#0000 2px 4px,var(--black) 4px 5px,#0000 5px 8px,var(--black) 8px 11px,#0000 11px 12px,var(--black) 12px 13px,#0000 13px 17px)}
.receipt .c{text-align:center;margin-top:6px}

/* Dropling: zařízení */
.devs{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px;align-items:end}
.devs h2{font-size:clamp(40px,5.6vw,88px)}
.devs h2 i{font-style:normal;color:var(--orange)}
.devs .side{display:grid;gap:20px}

/* Tymbo: hodiny */
.tym > .in{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:40px;align-items:center}
.clock{position:relative;width:min(540px,80vw);aspect-ratio:1}
.clock svg.face{width:100%;height:100%;display:block}
.clock .hand{position:absolute;left:50%;top:50%;width:2px;height:44%;background:var(--orange);transform-origin:50% 0;transform:translateX(-50%) rotate(180deg);animation:tick 60s steps(60) infinite;z-index:1}
@keyframes tick{to{transform:translateX(-50%) rotate(540deg)}}
.clock .ipad{position:absolute;left:50%;top:50%;width:66%;transform:translate(-50%,-50%);z-index:2;box-shadow:0 40px 50px -14px rgba(16,16,17,.5)}
.who .clock{margin:56px auto 0}
.tym .l{display:grid;gap:18px}
.tym .l h2{font-size:clamp(38px,4.2vw,64px)}
.tym .r{display:grid;gap:14px;align-self:end}
.tym .r .row{display:grid;gap:2px;padding-bottom:12px;border-bottom:1px solid var(--line-l)}
.tym .r .row span{color:var(--muted-l)}
.tym .r .row b{font-weight:700;text-transform:uppercase;font-size:14px}

/* další aplikace */
.next{display:block;text-decoration:none;background:var(--black);color:var(--white);border-top:1px solid var(--line-d)}
.next .in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:28px;align-items:center;padding-block:56px}
.next img{width:72px;height:72px;border-radius:18px}
.next .t{display:grid;gap:6px}
.next .t .mono{color:var(--muted-d)}
.next .t b{font-weight:900;font-size:clamp(40px,6vw,92px);letter-spacing:-.04em;line-height:1.02;text-transform:uppercase}
.next .arr{font-size:clamp(40px,5vw,80px);font-weight:300;transition:transform .3s}
.next:hover .arr{transform:translateX(12px);color:var(--orange)}
.next:hover b{color:var(--orange)}

/* O nás */
.about > .in{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:48px;align-items:end}
.about .txt{display:grid;gap:16px;max-width:52ch}
.about .txt p{margin:0;font-size:18px}
.mail{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:10px}
.mail .addr{font-weight:900;font-size:clamp(26px,3vw,40px);letter-spacing:-.02em;user-select:all}
.mail button{font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.04em;background:transparent;color:inherit;border:1px solid currentColor;padding:8px 12px;cursor:pointer;opacity:.8}
.mail button:hover{color:var(--orange);opacity:1}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--line-l)}
.facts div{padding:22px 22px 0 0;display:grid;gap:6px}
.facts div + div{padding-left:22px;border-left:1px solid var(--line-l)}
.facts .mono{color:var(--muted-l)}
.facts b{font-weight:700;font-size:17px}

/* ---------- patička ---------- */
footer{background:var(--black);color:var(--white);border-top:1px solid var(--line-d);position:relative;overflow:hidden}
footer .in{padding-block:56px 30px;display:grid;gap:44px}
.cols{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:32px}
.cols .logo-ink{width:150px}
.cols h3{font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--muted-d);margin:0 0 12px}
.cols ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.cols a{text-decoration:none;font-weight:700;font-size:14px;text-transform:uppercase}
.cols a:hover{color:var(--orange)}
.cols .lgl{font-size:14px;color:var(--muted-d);display:grid;gap:4px;margin-top:16px}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;color:var(--muted-d);border-top:1px solid var(--line-d);padding-top:20px}

/* ---------- úzké obrazovky ---------- */
@media (max-width:1020px){
  nav.top .in{grid-template-columns:auto auto;gap:14px 20px}
  nav.top ul{grid-column:1/-1;grid-row:2;justify-content:flex-start;overflow-x:auto;gap:22px;padding-bottom:2px;scrollbar-width:none}
  nav.top .cta{justify-self:end}
  .hero > .in{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;min-height:0;padding-block:56px 32px}
  .hero-art{min-height:0;height:min(84vw,520px);margin-top:36px}
  .apps-head{grid-template-columns:minmax(0,1fr)}
  .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  .feat,.devs,.about > .in{grid-template-columns:minmax(0,1fr)}
  .rcpt > .in,.tym > .in{grid-template-columns:minmax(0,1fr)}
  .rcpt .left{padding-top:0}
  .clock{justify-self:center}
  .cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .in{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
  .band > .in{padding-block:76px}
  .hero-foot{display:grid;gap:12px}
  .hero-foot div{padding:0;border:0}
  .card .ic{margin-block:22px 18px}
  .card p{font-size:13px}
  .feat li{grid-template-columns:40px minmax(0,1fr)}
  .printer{width:min(320px,100%)}
  .facts{grid-template-columns:minmax(0,1fr)}
  .facts div + div{padding-left:0;border-left:0}
  .next img{width:52px;height:52px;border-radius:13px}
  .cols{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .clock .hand,.play .receipt{animation:none}
  .card .ic,.next .arr{transition:none}
}