/* HH24 / tokens (AI-RULES §0.3)
   type: Onest 300 display / Onest 400 body
   colour (from the HH24 logo): ink #020409, paper #F2F4F7, accent #0A6CFF (+ logo cyan #00BAFB for the gradient)
   easing: cubic-bezier(.22,1,.36,1)
   radius: 0 (photos, surfaces) / 999px (buttons, chips)
   spacing: 8 16 24 40 64 104 168 */
:root{
  --ink:#020409; --paper:#F2F4F7; --accent:#0A6CFF; --cyan:#00BAFB;
  --brand:linear-gradient(90deg,#00BAFB 0%,#0A6CFF 100%);
  --ease:cubic-bezier(.22,1,.36,1);
  --s1:8px; --s2:16px; --s3:24px; --s4:40px; --s5:64px; --s6:104px; --s7:168px;
  --pad:clamp(16px,4vw,64px);
  --font:"Onest",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;padding-top:env(safe-area-inset-top,0px);background:var(--ink)}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--font);font-weight:400;font-size:clamp(15px,1.1vw,18px);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
h1,h2,h3{margin:0;font-weight:300;text-wrap:balance;hyphens:none}
p{margin:0;text-wrap:pretty}
button{font:inherit;color:inherit}
:focus-visible{outline:1px solid var(--accent);outline-offset:4px}
.label{font-size:12px;line-height:1.8;text-transform:uppercase;letter-spacing:.18em}
.muted{opacity:.72}
.faint{opacity:.56}
.num{font-variant-numeric:tabular-nums}
h2{font-size:clamp(2rem,5.5vw,5rem);line-height:.95;letter-spacing:-.035em}

/* ---------- buttons: solid pill + hairline pill (CTA-01) ---------- */
.btn{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 26px;border-radius:999px;font-size:15px;line-height:1;cursor:pointer;border:0;background:none;white-space:nowrap;isolation:isolate}
.btn__fill{position:absolute;inset:0;z-index:-1;transform:scaleX(0);transform-origin:left;transition:transform 500ms var(--ease)}
.btn__label{position:relative;transition:color 320ms var(--ease)}
.btn__arrow{position:relative;width:18px;height:18px;transition:transform 520ms var(--ease)}
.btn:hover .btn__fill,.btn:focus-visible .btn__fill{transform:scaleX(1)}
.btn:hover .btn__arrow{transform:translateX(5px)}
.btn--solid{background:var(--accent);color:#fff}
.btn--solid .btn__fill{background:var(--brand)}
.btn--solid{box-shadow:0 10px 34px -12px rgba(10,108,255,.7)}
.btn--line{box-shadow:inset 0 0 0 1px var(--accent);color:var(--paper)}
.btn--line .btn__fill{background:var(--accent)}
.btn--line:hover .btn__label{color:#fff}
.btn--sm{min-height:44px;padding:0 20px;font-size:14px}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3)}
.reassure{font-size:13px;opacity:.6;max-width:22ch;line-height:1.4}

/* ---------- entrance (MOT-01/02) ---------- */
.rise{opacity:0;transform:translateY(28px);filter:blur(14px)}
.is-in .rise,.rise.is-in{opacity:1;transform:none;filter:blur(0);transition:opacity 900ms var(--ease) var(--d,0ms),transform 900ms var(--ease) var(--d,0ms),filter 900ms var(--ease) var(--d,0ms)}

/* ---------- nav ---------- */
.nav{position:absolute;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:var(--s3);padding:var(--s3) var(--pad) 0}
.logo{display:flex;align-items:center}
.logo img{height:34px;width:auto}
@media (max-width:560px){.logo img{height:26px}}
.nav__right{display:flex;align-items:center;gap:var(--s4)}
.nav__links{display:flex;gap:var(--s4);font-size:14px}
.nav__links a{opacity:.72;transition:opacity 320ms var(--ease)}
.nav__links a:hover{opacity:1}
.lang{display:flex;align-items:center;gap:6px;font-size:13px}
.lang button{background:none;border:0;padding:12px 4px;min-width:44px;cursor:pointer;opacity:.5;transition:opacity 320ms var(--ease);letter-spacing:.08em}
.lang button[aria-pressed="true"]{opacity:1}
.lang span{opacity:.3}
@media (max-width:1020px){.nav__links{display:none}}
@media (max-width:560px){.nav .btn{display:none}.nav__right{gap:var(--s2)}}

/* ---------- hero: scheme B, typography behind the object ---------- */
.hero{position:relative;height:100svh;min-height:600px;overflow:hidden;background:radial-gradient(46% 42% at 60% 50%,rgba(10,108,255,.22) 0%,rgba(10,108,255,0) 70%),radial-gradient(30% 30% at 82% 22%,rgba(0,186,251,.10) 0%,rgba(0,186,251,0) 70%),radial-gradient(70% 60% at 58% 58%,#0A1220 0%,#050811 55%,var(--ink) 100%)}
.hero::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;opacity:.06;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.stage{position:absolute;inset:0;pointer-events:none}
.stage--back{z-index:1}
.stage--front{z-index:3}
.hero__title{position:absolute;inset:0;z-index:2;font-size:clamp(2.6rem,7.6vw,8.8rem);line-height:.88;letter-spacing:-.045em;pointer-events:none}
.hero__title .l1,.hero__title .l2{position:absolute;display:block;white-space:nowrap}
.hero__title .l1{left:var(--pad);top:17svh}
.hero__title .l2{right:var(--pad);top:47svh;text-align:right}
.hero__title .l2{padding-bottom:.16em;padding-right:.06em;margin-right:-.06em}
.hero__title .l2.is-in{background:var(--brand);-webkit-background-clip:text;background-clip:text;color:transparent}
html[lang="lv"] .hero__title{font-size:clamp(2.6rem,6.3vw,7.4rem)}
.hero__foot{position:absolute;left:var(--pad);right:var(--pad);bottom:calc(var(--s5) + env(safe-area-inset-bottom,0px));z-index:4;display:flex;flex-direction:column;gap:var(--s3);max-width:520px}
.hero__foot p{max-width:44ch;opacity:.72}

.fly{position:absolute;will-change:transform}
.fly__obj{position:relative;will-change:transform}
.fly__obj img{width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.fly__shadow{position:absolute;left:10%;width:80%;aspect-ratio:1;top:calc(100% + 6%);background:radial-gradient(rgba(0,0,0,.7),transparent 65%);filter:blur(18px);transform:scaleY(.15);transform-origin:center top;will-change:transform,opacity}
.fly--far .fly__obj img{filter:blur(2.4px) brightness(.62) saturate(.8)}
.fly--far{opacity:.85}
/* focus: drone, tablet, phone */
.fly--drone{left:31%;top:30%;width:min(29vw,500px)}
.fly--tablet{left:51%;top:63%;width:min(18vw,310px)}
.fly--phone{left:74%;top:15%;width:min(9vw,155px)}
/* background, softly out of focus */
.fly--gopro{left:22%;top:7%;width:min(6vw,100px)}
.fly--nikon{left:50%;top:5%;width:min(9vw,150px)}
.fly--watch{left:65%;top:9%;width:min(6vw,100px)}
.fly--samsung{left:92%;top:30%;width:min(4.5vw,80px)}
.fly--xiaomi{left:89%;top:62%;width:min(5.5vw,96px)}
.fly--controller{left:38%;top:74%;width:min(9vw,150px)}
.fly--vacuum{left:79%;top:81%;width:min(11vw,190px)}

@media (max-width:760px){
  :root{--s5:36px;--s6:56px}
  .hero{min-height:600px;height:min(100svh,760px)}
  .hero__foot{bottom:calc(28px + env(safe-area-inset-bottom,0px));gap:var(--s2)}
  .hero__title .l1,.hero__title .l2{position:relative;left:auto;right:auto;top:auto;text-align:left;white-space:normal}
  .hero__title{padding:76px var(--pad) 0;display:flex;flex-direction:column;gap:.04em}
  .hero__title .l2{align-self:flex-end;text-align:right}
  html[lang="lv"] .hero__title{font-size:7.8vw;gap:.16em}
  html[lang="lv"] .hero__title .l1,html[lang="lv"] .hero__title .l2{white-space:nowrap}
  .fly--drone{left:16%;top:30%;width:64vw}
  .fly--tablet{left:3%;top:47%;width:40vw}
  .fly--phone{left:68%;top:40%;width:21vw}
  .fly--gopro{left:4%;top:31%;width:12vw}
  .fly--nikon{left:66%;top:27%;width:18vw}
  .fly--controller{left:46%;top:56%;width:18vw}
  .fly--watch,.fly--samsung,.fly--xiaomi,.fly--vacuum{display:none}
}

/* ---------- logos marquee (explicit request, images only) ---------- */
.logos{--k:.7;background:var(--paper);color:var(--ink);padding-block:22px;overflow:hidden;border-bottom:1px solid rgba(7,8,10,.1)}
.logos__track{display:flex;align-items:center;gap:clamp(48px,6vw,var(--s6));width:max-content;animation:marquee 60s linear infinite}
.logos__track img{height:calc(var(--h,32px) * var(--k));width:auto;flex:none;opacity:.78}
.logos__track img:nth-child(n){margin-right:0}
@media (max-width:760px){.logos{--k:.55;padding-block:16px}}
.logos:hover .logos__track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- worldwide ---------- */
.world{display:grid;grid-template-columns:3fr 2fr;min-height:100svh;background:var(--ink)}
.world__globe{position:relative;overflow:hidden;display:grid;place-items:center;padding:var(--s5) 0}
.world__globe canvas{width:min(100%,760px);aspect-ratio:1;height:auto;display:block}
.world__txt{display:flex;flex-direction:column;justify-content:flex-end;gap:var(--s4);padding:var(--s6) var(--pad) var(--s6) 0}
.world__txt>p{max-width:46ch;opacity:.72}
.world__txt h2{font-size:clamp(2rem,3.6vw,3.8rem)}
.lead{width:100%;border-collapse:collapse;font-size:15px}
.lead th{text-align:left;font-weight:400;padding:0 0 var(--s2)}
.lead td{padding:14px 0;border-top:1px solid rgba(242,244,247,.14)}
.lead td:nth-child(2){padding-inline:var(--s2);white-space:nowrap}
.lead td:last-child,.lead th:last-child{text-align:right;opacity:.56}
.world__note{font-size:13px;opacity:.56;max-width:46ch}
@media (max-width:900px){.world{grid-template-columns:1fr;min-height:0}.world__txt{padding:0 var(--pad) var(--s6)}.world__globe{padding:var(--s5) var(--pad) var(--s3)}}

/* ---------- why ---------- */
.why{background:var(--paper);color:var(--ink);padding:var(--s6) var(--pad)}
.figures{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s4);margin:var(--s6) 0}
.figure b{display:block;font-weight:600;letter-spacing:-.05em;background:var(--brand);-webkit-background-clip:text;background-clip:text;color:transparent;font-size:clamp(3rem,7vw,7rem);line-height:.9;letter-spacing:-.045em}
.figure span{display:block;margin-top:var(--s2);font-size:14px;opacity:.6;max-width:22ch}
.reasons{display:grid;grid-template-columns:1.2fr 1fr 1fr 1.2fr;gap:var(--s4)}
.reason{border-top:1px solid rgba(7,8,10,.18);padding-top:var(--s3);display:flex;flex-direction:column;gap:var(--s2)}
.reason h3{font-size:clamp(20px,1.8vw,28px);line-height:1.08;letter-spacing:-.02em}
.reason p{font-size:15px;opacity:.72;max-width:34ch}
@media (max-width:980px){.figures,.reasons{grid-template-columns:1fr 1fr;gap:var(--s5) var(--s4)}}
@media (max-width:520px){.reasons{grid-template-columns:1fr}}

/* ---------- contact: dark, flows into the footer ---------- */
.contact{background:var(--ink);color:var(--paper);padding:var(--s6) var(--pad) var(--s4)}
.contact__main{max-width:880px;margin:0 auto;display:flex;flex-direction:column;gap:var(--s5)}
.contact__head{display:flex;flex-direction:column;gap:var(--s3)}
.contact__head h2{font-size:clamp(2.6rem,6.2vw,6rem);line-height:.92}
html[lang="lv"] .contact__head h2{font-size:clamp(2.2rem,4.6vw,4.4rem)}
.contact__head p{max-width:42ch;opacity:.72}


form{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4) var(--s4);position:relative}
.full{grid-column:1/-1}
.f{display:flex;flex-direction:column;gap:6px;min-width:0}
.f label{font-size:13px;opacity:.6}
.f input,.f select,.f textarea{font:inherit;font-size:16px;color:var(--paper);background:transparent;border:0;border-bottom:1px solid rgba(242,244,247,.22);border-radius:0;padding:8px 0 10px;width:100%;appearance:none;-webkit-appearance:none;transition:border-color 320ms var(--ease)}
.f select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23F2F4F7' stroke-width='1.5'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 2px center;padding-right:24px}
.f select option{background:var(--ink);color:var(--paper)}
.f textarea{min-height:72px;resize:vertical}
.f input::placeholder,.f textarea::placeholder{color:rgba(242,244,247,.34)}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-bottom-color:var(--accent)}
.f input:-webkit-autofill{-webkit-text-fill-color:var(--paper);-webkit-box-shadow:0 0 0 40px var(--ink) inset}
.f .err{display:none;font-size:13px;color:#FF7A66}
.f.bad input{border-bottom-color:#FF7A66}
.f.bad .err{display:block}
.consent{display:flex;gap:12px;align-items:flex-start;font-size:14px;opacity:.72;cursor:pointer;max-width:60ch}
.consent input{margin-top:4px;width:18px;height:18px;accent-color:var(--accent);flex:none}
.consent.bad{color:#FF7A66;opacity:1}
.btn.busy{pointer-events:none;opacity:.6}
.form-end{display:grid;grid-template-columns:1fr;gap:var(--s4)}
.form-end__main{display:contents}
@media (max-width:620px){form{grid-template-columns:1fr;gap:var(--s3)}}
.form-end .consent{grid-column:1/-1}
.done{position:absolute;inset:-8px;background:var(--ink);display:flex;flex-direction:column;justify-content:center;gap:var(--s3)}
.done h3{font-size:clamp(2rem,4vw,3.4rem);line-height:.95;letter-spacing:-.035em}
.done p{max-width:46ch;opacity:.72}
.done .cta-row{margin-top:var(--s1)}

/* ---------- footer ---------- */
.foot{background:var(--ink);padding:var(--s3) var(--pad) calc(var(--s3) + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:var(--s5)}
.foot__legal a:hover{color:var(--cyan)}
.foot__mark{display:flex;justify-content:center}
.foot__mark img{width:min(640px,86%);height:auto}
.foot__row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:var(--s2) var(--s4);font-size:14px;opacity:.56}
.foot__legal{font-style:normal;display:flex;flex-wrap:wrap;gap:4px var(--s3)}
.foot__row nav{display:flex;gap:var(--s3)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition-delay:0ms!important;animation:none!important;scroll-behavior:auto!important}
  .rise{opacity:1;transform:none;filter:none}
}

/* phone overrides that must come after the base rules */
@media (max-width:760px){
  .contact{padding-bottom:var(--s2)}
  .foot{padding-top:0;gap:var(--s4)}
}