/* Czech Drones site styles on top of kit.css: header, footer, page hero, components.
   Hard edges, heavy condensed type, sky, amber and steel. Nothing here hides content,
   so the page reads the same without JavaScript. */
html{scroll-behavior:smooth}
body{font-size:18px;line-height:1.5}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
h1,h2,h3,h4{text-transform:uppercase;letter-spacing:.002em;overflow-wrap:break-word;hyphens:auto}
h1{font-size:clamp(48px,6.6vw,104px);font-weight:900;line-height:1}
h2{font-size:clamp(36px,4.4vw,68px);line-height:1}
h3{font-size:clamp(26px,2.4vw,36px);font-weight:800;line-height:1.05}
h4{font-size:clamp(23px,1.9vw,29px);font-weight:800;line-height:1.05}
.lead{font-size:clamp(19px,1.6vw,23px);color:var(--ink-dim);line-height:1.45}
.eyebrow{display:none}
.container{max-width:1600px;padding-inline:var(--gutter)}
.section{padding-block:clamp(64px,8.5vw,120px)}
.section.tight{padding-block:clamp(44px,5vw,72px)}
.grid{gap:clamp(24px,3vw,44px)}
.sec-head{max-width:none;margin:0 0 clamp(36px,5vw,64px);text-align:start}
.sec-head p{margin-top:16px;max-width:36em;color:var(--ink-dim);font-size:clamp(19px,1.6vw,23px)}
.divider{height:4px;background:var(--ink);max-width:none}
.atmo,.grid-bg,.noise{display:none}

/* buttons */
.btn{display:inline-block;border:0;border-radius:0;font-family:var(--font-display);font-weight:800;text-transform:uppercase;letter-spacing:.01em;font-size:clamp(23px,2vw,28px);line-height:1;padding:.55em .95em .5em;text-decoration:none;cursor:pointer}
.btn.sm{font-size:22px;padding:.5em .8em .45em}
.btn.lg{font-size:clamp(25px,2.3vw,32px)}
.btn-primary{background:var(--amber);color:var(--ink);border:0}
.btn-primary:hover{background:var(--ink);color:#fff;border:0}
.btn-ghost{background:none;color:var(--ink);box-shadow:inset 0 0 0 3px var(--ink);border:0}
.btn-ghost:hover{background:var(--ink);color:#fff;border:0}
.btn .arr{display:none}

/* blocks */
.card{background:none;border:0;border-block-start:4px solid var(--ink);border-radius:0;padding:20px 0 0;box-shadow:none}
.card:hover{border-color:var(--ink);transform:none}
.card .ic{background:var(--amber);color:var(--ink);border:0;border-radius:0}
.card p{color:var(--ink-dim);font-size:18px}
.ticks::before,.ticks::after{display:none}
.badge,.tag{background:none;border:0;border-radius:0;padding:0;color:var(--ink);font-family:var(--font-text);font-weight:700;font-size:16px;letter-spacing:0;text-transform:none}
.stat .n{font-family:var(--font-display);font-weight:900;font-size:clamp(48px,4.6vw,72px);line-height:1;color:var(--ink)}
.stat .n .u{color:var(--accent-hot)}
.stat .l{font-family:var(--font-text);font-size:17px;letter-spacing:0;text-transform:none;color:var(--ink-dim)}

main *{border-radius:0!important}

html[lang="he"]{--font-display:'Heebo',sans-serif;--font-text:'Heebo',sans-serif;--font-mono:'Heebo',sans-serif}

/* header */
.site-head{position:sticky;top:0;z-index:50;background:#fff}
.head-in{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:76px}
.brand{display:inline-flex}
.brand img{display:block;height:38px;width:auto}
.nav{display:flex;gap:clamp(16px,2vw,30px)}
.nav a{font-weight:600;font-size:17px;color:var(--ink);text-decoration:none;padding-block:4px;white-space:nowrap}
.nav a:hover,.nav a.active{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px;text-decoration-color:var(--amber)}
.head-actions{display:flex;align-items:center;gap:18px}
.menu-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.menu-toggle span{width:24px;height:3px;background:var(--ink)}

/* Native details keeps the language grid usable without JavaScript. The footer
   trigger sits at the inline end so both panels grow into the available space. */
.lang-menu{--lang-clearance:58px;position:relative;flex-shrink:0;font-family:var(--font-text);font-weight:700}
.lang-menu summary{display:flex;align-items:center;gap:6px;inline-size:max-content;min-block-size:38px;padding:6px 8px;border:3px solid currentColor;cursor:pointer;list-style:none;font-size:14px;line-height:18px}
.lang-menu summary::-webkit-details-marker{display:none}
.lang-menu summary::before{content:"";inline-size:16px;block-size:16px;flex-shrink:0;background:currentColor;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='black' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cellipse cx='12' cy='12' rx='4' ry='10'/%3E%3Cpath d='M2 12h20'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
.lang-menu summary::after{content:"";inline-size:6px;block-size:6px;margin-block-start:-3px;border-inline-end:2px solid currentColor;border-block-end:2px solid currentColor;transform:rotate(45deg)}
html[dir="rtl"] .lang-menu summary::after{transform:rotate(-45deg)}
.lang-menu[open] summary::after{margin-block-start:3px;transform:rotate(225deg)}
html[dir="rtl"] .lang-menu[open] summary::after{transform:rotate(135deg)}
.lang-menu summary:hover,.lang-menu[open] summary{background:var(--amber);color:var(--ink);border-color:var(--ink)}
.lang-menu summary:focus-visible{outline-color:var(--amber)}
.lang-menu ul{position:absolute;inset-inline-end:0;inset-block-start:100%;z-index:60;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px 12px;inline-size:min(42rem,calc(100vw - 2 * var(--gutter) - var(--lang-clearance)));margin:0;padding:8px;list-style:none;background:#fff;color:var(--ink);border:3px solid var(--ink)}
.lang-menu li{min-inline-size:0}
.lang-menu a{display:block;min-block-size:40px;padding:8px 10px;border-inline-start:3px solid transparent;font-size:16px;line-height:24px;font-weight:500;text-align:start;text-decoration:none;color:var(--ink);overflow-wrap:anywhere}
.lang-menu a[lang="he"]{direction:rtl}
html:not([dir="rtl"]) .lang-menu a[lang="he"]{text-align:end}
.lang-menu a[aria-current]{background:var(--steel);color:#fff;border-inline-start-color:var(--amber);font-weight:800}
.lang-menu a:hover,.lang-menu a:focus-visible{background:var(--amber);color:var(--ink)}
.lang-menu a:focus-visible{outline:3px solid var(--ink);outline-offset:-3px}
.foot-bottom .lang-menu{--lang-clearance:0px;order:1;margin-inline-start:auto}
.foot-bottom .lang-menu ul{inset-block-start:auto;inset-block-end:100%}

/* sky: the home hero and the interior page heroes */
.page-hero{position:relative;overflow:hidden;border:0;background:linear-gradient(#5f8cb0,#a9c6d6 62%,#e9eeee);padding-block:clamp(52px,6vw,88px) clamp(90px,10vw,150px)}
canvas.sky{position:absolute;inset:0;width:100%;height:100%;display:block}
.ridge{position:absolute;inset-block-end:-1px;inset-inline:0;z-index:1;display:block;width:100%;height:clamp(60px,8vw,120px)}
.page-hero .container{position:relative;z-index:2;max-width:1600px}
.page-hero h1{margin:0;max-width:12em}
.page-hero .lead{margin-block-start:18px;max-width:34em;color:var(--ink);font-weight:500}

.hero{position:relative;min-height:calc(100svh - 76px);overflow:hidden;background:linear-gradient(#5f8cb0,#a9c6d6 62%,#e9eeee 88%);display:flex;flex-direction:column;justify-content:flex-end}
.hero-copy{position:relative;z-index:3;width:100%;max-width:1600px;margin-inline:auto;padding-inline:var(--gutter);padding-block-end:clamp(10px,1.4vw,20px);pointer-events:none}
/* --line and --word come from the build: the longest line and word of the headline in this language */
.hero h1{--glyph:.5;font-size:min(calc((100vw - 2 * var(--gutter)) / (var(--line) * var(--glyph))),27svh);max-width:none;hyphens:none}
html[lang="he"] .hero h1{--glyph:.62}
.phone{display:none}
.hero .ridge{position:relative;inset:auto;height:clamp(70px,11vw,150px);margin-block-end:-1px}
.hero-band{position:relative;z-index:3;background:var(--steel);color:#fff;padding-block:clamp(14px,1.6vw,22px) clamp(20px,2.4vw,30px)}
.hero-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 40px}
.hero-row p{max-width:34em;font-size:clamp(18px,1.5vw,21px);font-weight:500;line-height:1.4;color:#fff}
.hero-row .btn-primary:hover{background:#fff;color:var(--ink)}
.sight,.target{position:absolute;top:0;left:0;pointer-events:none;will-change:transform}  /* moved by transform, so physical on purpose */
.target{z-index:2;width:40px;height:40px;margin:-20px 0 0 -20px}
.target svg,.sight svg{display:block;width:100%;height:100%}
.sight{z-index:4;width:150px;height:150px;margin:-75px 0 0 -75px;color:var(--amber)}
.sight svg{transition:transform .25s}
.sight.locked{color:#fff}
.sight.locked svg{transform:scale(.72)}
html:not(.js) .sight,html:not(.js) .target{display:none}
.sight span{position:absolute;inset-block-start:100%;inset-inline:-40px;text-align:center;font-weight:700;font-size:16px;color:var(--ink);opacity:0;transition:opacity .2s}
.sight.locked span{opacity:1}

/* home sections */
.model{display:grid;grid-template-columns:minmax(150px,1.1fr) 1.2fr 3fr;gap:clamp(16px,3vw,48px);align-items:center;padding-block:clamp(18px,2.4vw,30px);border-block-end:4px solid var(--ink)}
.model:first-of-type{border-block-start:4px solid var(--ink)}
.model h3{font-size:clamp(52px,5.4vw,84px);font-weight:900;line-height:.95}
.model small{display:block;font-size:16px;font-weight:700;margin-block-start:6px}
.model svg{display:block;width:100%;height:clamp(70px,8.4vw,120px);overflow:visible}
.band-amber{background:var(--amber)}
.band-amber h2{font-size:clamp(48px,6.6vw,104px);font-weight:900;line-height:1}
.band-amber .lead{color:var(--ink);margin-block-start:22px}
.band-amber .btn-ghost{margin-block-start:clamp(32px,4vw,52px)}
.stack{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,44px);margin-block-start:clamp(40px,5vw,70px)}
.stack h3{margin-block-end:10px}
.stack p{font-size:18px;font-weight:500}
.band-steel{background:var(--steel);color:#fff}
.band-steel h2,.band-steel h3{color:#fff}
.band-steel .lead{color:#d6e0e6;margin-block-start:18px}
.band-steel .btn-ghost{color:#fff;box-shadow:inset 0 0 0 3px #fff;margin-block-start:clamp(28px,4vw,44px)}
.band-steel .btn-ghost:hover{background:#fff;color:var(--ink)}
.status-list{list-style:none;padding:0;margin-block-start:clamp(36px,5vw,60px)}
.status-list li{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 40px;padding-block:clamp(16px,2vw,24px);border-block-start:2px solid var(--steel-dim)}
.status-list b{font-family:var(--font-display);font-weight:800;text-transform:uppercase;font-size:clamp(30px,3.2vw,48px);line-height:1.05}
.status-list p{flex-basis:100%;max-width:40em;color:#d6e0e6}
.status-list span{color:var(--amber);font-weight:700}
.team{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(30px,5vw,80px);align-items:end}
.team p{font-size:clamp(19px,1.6vw,23px)}
.team b{display:block;font-family:var(--font-display);font-weight:900;font-size:clamp(40px,4vw,60px);line-height:1;text-transform:uppercase;margin-block-start:20px}
.stripe{height:26px;background:repeating-linear-gradient(-45deg,var(--amber) 0 26px,var(--ink) 26px 52px)}
.demo{background:var(--bg-elev-2)}
.demo h2{max-width:16em;margin-block-end:24px}
main p a{text-decoration:underline;text-underline-offset:3px}
main p a.btn{text-decoration:none}
.prose{max-width:44em}
.prose h2{font-size:clamp(28px,2.6vw,38px);margin-block:clamp(32px,4vw,48px) 12px}
.prose p,.prose ul{margin-block-end:14px}
.prose ul{padding-inline-start:1.2em}

/* footer */
.site-foot{background:var(--steel);color:#fff;margin:0}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.3fr;gap:clamp(24px,3vw,44px);padding-block:clamp(44px,5vw,64px) 36px;padding-inline:var(--gutter);max-width:1600px;margin-inline:auto}
.foot-brand .brand img{height:34px}
.foot-claim{margin-block:16px;max-width:22em;color:#d6e0e6;font-size:17px}
.foot-col h4{font-size:26px;color:#fff;margin-block-end:12px}
.foot-col a,.foot-col span{display:block;margin-block-end:8px;font-size:17px;color:#d6e0e6;text-decoration:none}
.foot-col a:hover,.foot-legal a:hover{color:var(--amber);text-decoration:underline}
.foot-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px 28px;padding-block:16px 26px;padding-inline:var(--gutter);max-width:1600px;margin-inline:auto;border-block-start:2px solid var(--steel-dim);color:#d6e0e6;font-size:16px}
.foot-legal{display:flex;gap:20px}
.foot-legal a{color:#d6e0e6}

@media(max-width:1480px){.head-actions .btn{display:none}}
@media(max-width:1180px){
  .nav{position:absolute;inset-block-start:100%;inset-inline:0;flex-direction:column;gap:6px;padding:18px var(--gutter) 26px;background:#fff;border-block-end:4px solid var(--ink);visibility:hidden}
  .nav a{font-size:22px}
  body.nav-open .nav{visibility:visible}
  .menu-toggle{display:flex}
  .head-actions .btn{display:none}
  html:not(.js) .menu-toggle{display:none}
  html:not(.js) .head-in{flex-wrap:wrap}
  html:not(.js) .nav{position:static;visibility:visible;flex-direction:row;flex-wrap:wrap;order:3;padding:0 0 12px;border:0;width:100%}
}
@media(max-width:900px){
  .model{grid-template-columns:1fr 1fr}
  .model svg{grid-column:1/-1;grid-row:2}
  .stack,.foot-grid{grid-template-columns:1fr 1fr}
  .team{grid-template-columns:1fr}
  .cols-3,.cols-4{grid-template-columns:1fr 1fr}
  .sight{width:110px;height:110px;margin:-55px 0 0 -55px}
}
@media(max-width:560px){
  /* The header is the containing block on phones; neither the language trigger
     nor the adjacent navigation toggle has to carry the width of the panel. */
  .head-in{position:relative;gap:12px}
  .head-in>.brand{min-inline-size:0}
  .head-in>.brand img{max-inline-size:100%;block-size:auto}
  .head-actions{gap:10px;flex-shrink:0}
  .head-actions .lang-menu{position:static}
  .lang-menu ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 8px;inline-size:auto;inset-inline:0;padding:6px}
  .lang-menu a{min-block-size:36px;padding:6px 8px}
  .foot-bottom .lang-menu{flex-basis:100%}
  .foot-bottom .lang-menu summary{margin-inline-start:auto}
  .foot-bottom .lang-menu ul{inset-inline:calc(-1 * var(--gutter))}
  .phone{display:inline}
  .hero h1{font-size:min(calc((100vw - 2 * var(--gutter)) / (var(--word) * var(--glyph))),17svh)}
  .stack,.foot-grid,.model,.cols-2,.cols-3,.cols-4{grid-template-columns:1fr}
}
/* Let tall panels scroll with the page. Keep this independent of open state so
   opening a sticky header after scrolling never makes the trigger jump away.
   Without JS the expanded navigation also contributes to the header height. */
html:not(.js) .site-head{position:relative}
@media(max-height:700px){
  .site-head{position:relative}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.sight svg{transition:none}}