:root{
  /* from @ixicare/ui src/styles/variables.css, not sampled off a screen.
     --blue stays the logo blue: cornflower drops focus rings under 4.5:1. */
  --ink:#0e0c45;    /* --midnight-blue */
  --blue:#2161f0;   /* ~ --royal-blue #2162ef */
  --teal:#16b5b2;   /* --site-accent, the teal that holds up at icon size */
  --mute:#444274;   /* --body-color */
  /* small print: about as light as small text goes on white and still passes AA (4.56:1) */
  --faint:#6e7590;
  --hair:#e6e9f5;
}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;background:#fff;color:var(--ink);
  font-family:"Plus Jakarta Sans",system-ui,sans-serif;
  line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}

.stage{position:relative;height:240svh}
.screen{
  position:sticky;top:0;overflow:hidden;
  height:100svh;
  display:grid;grid-template-rows:auto 1fr auto;
  gap:1rem;
  padding:1.75rem clamp(1.25rem,4vw,3.5rem) 1.25rem;
}
/* the wash: teal gathers behind IN, blue behind OUT */
.screen{
  background:
    radial-gradient(52vw 52vh at 2% 34%, rgba(34,191,205,.30), rgba(34,191,205,0) 68%),
    radial-gradient(54vw 56vh at 99% 64%, rgba(33,97,240,.26), rgba(33,97,240,0) 68%),
    #fff;
}
.screen > *{position:relative;z-index:1}

/* ---------- headline ---------- */
.head h1{
  margin:0;font-weight:800;
  font-size:clamp(1.6rem,3.1vw,2.6rem);line-height:1.02;letter-spacing:-.03em;
}
.head p{margin:.5rem 0 0;color:var(--mute);max-width:34rem;font-size:1.0625rem}

/* ---------- diagram ---------- */
.diagram{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  grid-template-rows:auto auto;
  align-items:start;align-content:start;
  padding-top:clamp(1rem,4vh,3rem);
  column-gap:clamp(2rem,7vw,7rem);row-gap:clamp(.5rem,1.6vh,1.1rem);
  position:relative;
}
.zone--in{grid-area:1/1;color:var(--teal)}
.zone--out{grid-area:1/3;color:var(--blue);text-align:right}
.side--in{grid-area:2/1}
.side--out{grid-area:2/3}
.core{grid-area:2/2;align-self:center}

.zone{
  font-weight:800;margin:0;line-height:1;letter-spacing:-.02em;
  font-size:clamp(1.9rem,4vw,3.25rem);
}

.side{position:relative;display:grid;gap:clamp(.4rem,1.1vh,.6rem);align-content:start}
/* while JS measures the open height, nothing may animate */
.measuring,.measuring *{transition:none !important}

.item{
  position:relative;background:#fff;border-radius:10px;will-change:transform,opacity;
  padding:clamp(.6rem,1.5vh,.8rem) 1.05rem;
  font-weight:600;font-size:clamp(.9rem,1.1vw,1.0625rem);
  box-shadow:0 10px 26px -14px rgba(14,12,69,.40),0 1px 3px rgba(14,12,69,.06);
}
.side--out .item{text-align:right}
/* the photo height drives the card: on a short screen all five still fit the fold */
.side--out{--shot-h:clamp(2.9rem,6.9vh,4rem)}
.side--out .item{
  padding-left:calc(1.9rem + 1.6 * var(--shot-h));
  min-height:calc(var(--shot-h) + 1.5rem);
  display:grid;align-content:center;
}
.side--out .label{display:block}
/* the OUT photos: grey at rest, full colour once scrolled in */
.shot{
  position:absolute;left:.95rem;top:50%;transform:translateY(-50%);
  height:var(--shot-h);width:auto;aspect-ratio:16/10;border-radius:8px;
  object-fit:cover;
  box-shadow:0 5px 14px -6px rgba(14,12,69,.45),0 0 0 1px rgba(14,12,69,.06);
  filter:grayscale(1);opacity:.55;
}

.label{display:block;font-weight:700}

/* ---- expanding content, two steps: paragraph then bullets ---- */
.reveal{overflow:hidden;height:0}
.reveal > div{min-height:0;display:flow-root}

.reveal p,.reveal li{opacity:0}
.reveal p{margin:.45rem 0 0;font-size:.8125rem;font-weight:400;color:var(--mute);line-height:1.5}
.reveal ul{list-style:none;margin:.45rem 0 0;padding:0;font-size:.8125rem;font-weight:500;
  columns:2;column-gap:1.25rem}
.reveal li{break-inside:avoid}
.reveal li{padding:.08rem 0;color:var(--mute)}
.reveal li b{color:var(--ink);font-weight:700}
.reveal li b + span{margin-left:.35rem}
.reveal .ask{font-style:italic}

/* ---- systems & apis: a line icon per item ---- */
.reveal ul.sys li{display:flex;align-items:flex-start;gap:.45rem}
.reveal ul.sys .ico{
  flex:0 0 auto;width:1rem;height:1rem;margin-top:.15rem;
  fill:none;stroke:var(--teal);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}

/* ---- other devices: a picture each, no boxes ---- */
.others{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:.5rem;margin-top:.6rem;
}
.others figure{margin:0}
.others img{
  width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
  border-radius:7px;box-shadow:0 0 0 1px rgba(14,12,69,.07);
  background:#f3f5fb;
}
.others figcaption{
  margin-top:.3rem;font-size:.75rem;font-weight:600;
  line-height:1.35;color:var(--mute);
}


/* device names appear with the rest */
/* the devices card sits above its siblings so the tip can float over them */
.item--devices{z-index:4}
.thumbs figure{margin:0;display:grid;justify-items:center;position:relative}
.thumbs figure:hover{z-index:10}

/* the device line floats above everything, so hovering moves no layout */
.tip{
  position:absolute;top:calc(100% + .45rem);left:50%;translate:-50% 0;
  width:12.5rem;z-index:5;pointer-events:none;
  background:#fff;border-radius:9px;padding:.55rem .7rem;
  font-size:.75rem;font-weight:500;line-height:1.4;color:var(--mute);
  box-shadow:0 14px 32px -12px rgba(14,12,69,.38),0 0 0 1px rgba(34,191,205,.18);
  opacity:0;transform:translateY(-4px);
  transition:opacity .18s ease,transform .18s ease;
}
/* the Pro tip carries its capability list, so it needs more room than a
   one-line tip and its own list reset */
.tip--pro{width:15rem}
.tip--pro b{color:var(--ink);font-weight:700}
.tip--pro ul{list-style:none;margin:.4rem 0 0;padding:0}
.tip--pro li{padding:.09rem 0}

.tip::before{
  content:"";position:absolute;bottom:100%;left:50%;translate:-50% 0;
  border:.35rem solid transparent;border-bottom-color:#fff;
}
/* keep the end tips inside the screen instead of centring them off it */
.thumbs figure:first-child .tip{left:0;translate:0 0}
.thumbs figure:first-child .tip::before{left:1.6rem}
.thumbs figure:last-child .tip{left:auto;right:0;translate:0 0}
.thumbs figure:last-child .tip::before{left:auto;right:1.6rem;translate:0 0}
.thumbs figure:hover .tip{opacity:1;transform:none}
.thumbs figure:hover img{filter:drop-shadow(0 8px 16px rgba(14,12,69,.22))}
.thumbs img{transition:filter .18s ease}
.thumbs figcaption{
  font-size:.75rem;font-weight:600;color:var(--mute);
  margin-top:.3rem;white-space:nowrap;
  opacity:0;
}


@media (prefers-reduced-motion:reduce){
  .reveal,.reveal p,.reveal li,.thumbs figcaption{transition:none}
}

/* first IN panel carries the product line, no interaction needed */
.thumbs{
  display:flex;align-items:flex-end;justify-content:flex-start;
  gap:clamp(.5rem,1.2vw,1rem);margin-top:.75rem;
}

.thumbs img{
  height:clamp(1.9rem,2.7vw,2.4rem);width:auto;
  object-fit:contain;flex:0 0 auto;
}

/* ---------- links: curves with a signal flowing along them ---------- */
.links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;overflow:visible}
.links path{fill:none;stroke-width:2;stroke-linecap:round}

.zone,.side,.core{position:relative;z-index:1}

/* ---------- centre ---------- */
.core{display:grid;justify-items:center;position:relative}
.core-row{position:relative;z-index:1}
/* soft clearing, no hard edge */
.core::before{
  content:"";position:absolute;inset:50% auto auto 50%;translate:-50% -50%;
  width:clamp(13rem,20vw,20rem);aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,#fff 34%,rgba(255,255,255,.7) 55%,rgba(255,255,255,0) 72%);
}
.core img{
  width:clamp(7rem,11vw,11.5rem);position:relative;z-index:1;
  filter:drop-shadow(0 14px 26px rgba(14,12,69,.26));
}
/* ---------- below the fold, rudimentary ---------- */
.below{max-width:68rem;margin:0 auto;padding:0 clamp(1.25rem,4vw,3.5rem)}
.sec{padding-block:clamp(3rem,7vh,6rem);border-top:1px solid var(--hair)}
.sec h2{font-size:clamp(1.6rem,3vw,2.25rem);font-weight:800;letter-spacing:-.02em;margin:0;line-height:1.05}
.sec > p{color:var(--mute);max-width:36rem;margin:.6rem 0 0;font-size:1.0625rem}

.shots{position:relative;margin-top:2rem;padding-right:4rem}
.shots img{height:auto}
.shots .hero{
  width:100%;height:auto;border-radius:12px;
  box-shadow:0 20px 50px -24px rgba(14,12,69,.35),0 0 0 1px rgba(14,12,69,.10);
}
.shots .phone{
  position:absolute;right:0;bottom:-1rem;width:14%;min-width:6rem;
  filter:drop-shadow(0 14px 28px rgba(14,12,69,.28));
}
.points{
  list-style:none;margin:3.5rem 0 0;padding:0;display:grid;gap:1rem 1.5rem;
  grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));
}
.points li{font-weight:600;padding-top:.7rem;border-top:2px solid var(--teal)}
/* German and Nordic compounds are wider than a 10rem track */
.points li span{hyphens:auto;overflow-wrap:anywhere}

/* ---------- the flagship ---------- */
.pro{
  display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3.5rem);align-items:center;margin-top:2.25rem;
}
.pro img{width:100%;height:auto;filter:drop-shadow(0 14px 26px rgba(14,12,69,.24))}
.pro .points{margin:0}
/* each Pro capability gets a line icon above its label */
.points.feats li{display:grid;gap:.5rem;justify-items:start;align-content:start}
.points.feats .ico{
  width:1.4rem;height:1.4rem;
  fill:none;stroke:var(--teal);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}
.sec > p.sub{
  margin:3.75rem 0 0;font-size:.8125rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--mute);
}
/* sectors: a photo each, label sitting on the image */
.sectors{
  list-style:none;padding:0;margin:1rem 0 0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.85rem;
}
.sectors li{
  position:relative;border-radius:12px;overflow:hidden;aspect-ratio:16/10;
  box-shadow:0 14px 30px -20px rgba(14,12,69,.55);
}
.sectors img{width:100%;height:100%;object-fit:cover}
/* the scrim only darkens the lower half, so the picture still reads */
.sectors li::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,7,35,.85) 0%,rgba(8,7,35,.5) 34%,rgba(8,7,35,0) 68%);
}
.sectors span{
  position:absolute;z-index:1;left:.95rem;right:.95rem;bottom:.8rem;
  color:#fff;font-weight:700;font-size:clamp(.8125rem,2.6vw,.9375rem);line-height:1.25;
  text-shadow:0 1px 4px rgba(0,0,0,.45);
}
@media (max-width:52rem){.sectors{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:22rem){.sectors{grid-template-columns:1fr}}
@media (max-width:40rem){
  /* start-align the watch alone: as justify-items it also shrink-wrapped the
     feature grid, which then collapsed to a single column */
  .pro{grid-template-columns:1fr}
  .pro img{max-width:10rem;justify-self:start}
}

/* ---------- contact ---------- */
/* The perimeter editor, faded in beside the form. The form is capped at 34rem
   inside a 68rem column, so this fills the empty half rather than sitting
   under any input. Decorative: masked soft on every side, never a hard edge.
   Strength lives in one place, the opacity below. */
#contact{position:relative}
#contact > *{position:relative;z-index:1}
#contact::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  top:2.5rem;bottom:1.5rem;right:-1.5rem;width:min(33rem,52%);
  background:url(img/geofence.webp) no-repeat center/cover;
  opacity:.45;
  -webkit-mask-image:radial-gradient(76% 76% at 50% 46%,#000 24%,transparent 74%);
          mask-image:radial-gradient(76% 76% at 50% 46%,#000 24%,transparent 74%);
}

form{display:grid;gap:.85rem;max-width:34rem;margin-top:1.75rem}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:.85rem}
label{display:grid;gap:.3rem;font-size:.8125rem;font-weight:600}
input,textarea{
  font:inherit;font-size:1rem;color:var(--ink);background:#fff;
  border:1px solid var(--hair);border-radius:8px;padding:.7rem .8rem;width:100%;
}
input:focus-visible,textarea:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
textarea{min-height:6rem;resize:vertical}
button{
  justify-self:start;margin-top:.3rem;border:0;cursor:pointer;
  background:linear-gradient(225deg,#4286f3,#22bfcd);color:#fff;font:inherit;font-weight:700;
  padding:.8rem 1.7rem;border-radius:8px;
  box-shadow:0 8px 18px -8px rgba(66,134,243,.55);
  transition:filter .18s ease,box-shadow .18s ease;
}
button:hover{filter:brightness(1.06);box-shadow:0 10px 22px -8px rgba(66,134,243,.65)}
button:active{filter:brightness(.97);box-shadow:0 4px 10px -6px rgba(66,134,243,.5)}
.legal{color:var(--faint);font-size:.8125rem;padding-block:1.5rem 3rem}
.legal p{margin:0 0 .3rem}
.legal a,.form-note a{color:inherit;text-decoration-color:var(--hair)}
.legal a:hover,.form-note a:hover{color:var(--ink);text-decoration-color:currentColor}

@media (max-width:56rem){
  /* nothing to fill beside a full-width form, so it sits over the heading */
  #contact::before{top:0;bottom:auto;height:14rem;right:-1rem;width:min(21rem,78%);opacity:.30}
  .pair{grid-template-columns:1fr}
  .shots{padding-right:2rem}
  .shots .phone{width:20%}
}

/* ---------- foot ---------- */
.foot{color:var(--mute);font-size:.875rem;display:flex;justify-content:space-between;align-items:flex-end;gap:1rem;flex-wrap:wrap}
.cue{display:grid;justify-items:center;gap:.3rem;color:var(--mute);text-decoration:none;font-weight:600}
.cue svg{width:1.1rem;height:1.55rem;fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:no-preference){
  .cue svg{animation:nudge 2.4s ease-in-out 1.2s infinite}
  @keyframes nudge{0%,70%,100%{transform:translateY(0)}82%{transform:translateY(5px)}}
}
.cue:hover{color:var(--ink)}

/* ---------- narrow ---------- */
@media (max-width:56rem){
  /* Nothing scrubs here: the timeline is off below this width. So the hero
     stops being a sticky one-screen stage and becomes an ordinary block,
     otherwise 100svh + overflow:hidden cuts the stacked columns off. */
  .stage{height:auto}
  .screen{position:static;height:auto;overflow:visible;padding-block:2rem}
  .diagram{grid-template-columns:1fr;grid-template-rows:none;gap:.75rem}
  .zone--in,.zone--out,.side--in,.side--out,.core{grid-area:auto}
  .zone--in{order:1}
  .side--in{order:2}
  .core{order:3;margin-block:1.5rem}
  .zone--out{order:4;text-align:left;margin-top:.5rem}
  .side--out{order:5}
  .side--in,.side--out{padding:0}
  .side--out .item{text-align:left}
  /* and for the same reason the panels are simply open */
  .reveal{height:auto}
  .reveal p,.reveal li,.thumbs figcaption{opacity:1;transform:none}
  .shot{filter:none;opacity:1}
  /* a nowrap caption under each flex child gave the row a min-content width
     wider than the screen, which pushed the whole page over. Wrap instead. */
  .thumbs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.65rem .35rem}
  .thumbs img{height:2rem}
  .thumbs figcaption{white-space:normal;text-align:center}
  /* no hover on a touch screen, and the Pro list is repeated below the fold */
  .tip{display:none}
  .zone,.zone--out{text-align:left;font-size:clamp(1.75rem,9vw,2.5rem)}
  /* the cue points past a one-screen stage; stacked, the content just continues */
  .foot{display:none}
}

/* ---------- phone ---------- */
@media (max-width:40rem){
  .others{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem .5rem}
  .reveal ul{columns:1}
  /* a 10rem track only pairs up from 430px, so a 393px phone got one column
     and a 430px one got two. A shorter track pairs them on both. */
  .points{grid-template-columns:repeat(auto-fit,minmax(8.5rem,1fr))}
  /* the overlay has to stop eating the screenshot it sits on */
  .shots{padding-right:0}
  .shots .phone{width:24%;min-width:0;right:-.25rem;bottom:-1rem}
}

/* ---------- contact form states ---------- */
/* display:grid on <form> beats the UA [hidden] rule, so state it outright */
[hidden]{display:none !important}
.trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-note{margin:.6rem 0 0;font-size:.8125rem;color:var(--faint)}
.form-status{margin:.5rem 0 0;font-size:.875rem;font-weight:600;color:#b4232a;min-height:1.2em}
.form-status:empty{margin:0}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:#d4646a}
button[disabled]{opacity:.6;cursor:progress}

.thanks{
  max-width:34rem;margin-top:1.75rem;padding:1.5rem 1.6rem;border-radius:12px;
  background:linear-gradient(96deg,#e4f7f9,#e6eeff);
}
.thanks h3{margin:0;font-size:1.25rem;font-weight:800;letter-spacing:-.01em}
.thanks p{margin:.5rem 0 0;color:var(--mute);font-size:.9375rem}

/* ---------- language ---------- */
/* hidden only until the translation lands; the head script lifts it after
   2.5s whatever happens */
.i18n-pending body{visibility:hidden}

/* top right of the hero, out of the headline's way. On narrow screens the
   screen is static, so this anchors to .stage, which is the same corner. */
.screen > .lang{
  position:absolute;z-index:6;
  top:1.35rem;right:clamp(.75rem,3vw,2.75rem);
}
.head{padding-right:3.5rem}
.lang .lang-btn{
  display:flex;align-items:center;gap:.3rem;margin:0;
  padding:.4rem .5rem;border-radius:8px;
  background:none;box-shadow:none;color:var(--mute);
  font-size:.75rem;font-weight:700;letter-spacing:.04em;
  opacity:.7;transition:opacity .18s ease,background-color .18s ease;
}
.lang .lang-btn:hover,.lang .lang-btn[aria-expanded="true"]{
  opacity:1;filter:none;box-shadow:none;background:rgba(14,12,69,.05);
}
.lang .lang-btn svg{
  width:1.05rem;height:1.05rem;
  fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;
}
.lang-menu{
  position:absolute;top:calc(100% + .35rem);right:0;
  list-style:none;margin:0;padding:.35rem;
  width:min(24rem,calc(100vw - 2rem));max-height:min(26rem,70vh);overflow-y:auto;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.1rem;
  background:#fff;border-radius:10px;
  box-shadow:0 18px 40px -14px rgba(14,12,69,.38),0 0 0 1px rgba(14,12,69,.08);
}
.lang-menu button{
  display:block;width:100%;margin:0;padding:.45rem .6rem;border-radius:6px;
  background:none;box-shadow:none;color:var(--ink);text-align:left;
  font-size:.875rem;font-weight:500;
}
.lang-menu button:hover{filter:none;box-shadow:none;background:#f1f4fb}
.lang-menu button[aria-current]{color:var(--blue);font-weight:700;background:#eef3fe}