:root{
  /* sampled pixel-for-pixel from apps.iq.lu */
  --bg:#050505; --bg-header:#010101;
  --gold:#bfa560; --gold-dim:#9c874e; --amber:#e7954e;
  --hairline:#292315; --rule:#1a1a18;
  --text:#f5f5f0;
  --muted:#8f8f8a;      /* lifted from sampled #696967 — that was 3.7:1, under AA */
  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --gut:clamp(20px,5vw,80px);
  --maxw:1180px;        /* the page keeps a measure; a 34" screen is not a canvas */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:var(--gut);top:-100px;z-index:9;background:var(--gold);color:#050505;
  padding:.7rem 1rem;font:500 .72rem/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;text-decoration:none}
.skip:focus{top:12px}

/* ---- the point field: one canvas behind the whole page ---- */
#field{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
main,header,footer{position:relative;z-index:1}

/* ---- chrome ---- */
header{position:fixed;top:0;left:0;right:0;height:64px;z-index:5;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 var(--gut);background:rgba(1,1,1,.82);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--rule)}
.mark{display:flex;align-items:center;gap:.7rem;
  color:var(--gold);font:500 .78rem/1 var(--sans);letter-spacing:.34em;text-decoration:none}
.mark img{display:block;width:34px;height:34px}
.top-cta{font:500 .68rem/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--gold);text-decoration:none}
.top-cta:hover{color:var(--text)}

/* ---- shared beat scaffolding ---- */
.beat{min-height:100svh;padding:calc(64px + 8vh) var(--gut) 8vh;display:flex;flex-direction:column;justify-content:center}
.beat>*{width:100%;max-width:var(--maxw)}
/* One beat at a time. Every section is a screen, so a flick moves one screen
   and stops there instead of sailing through three of them. This is the
   scroller's own snapping -- the trackpad keeps its momentum and its feel, and
   nothing here listens for wheel events to drive the page itself. Switched on
   only while every beat really fits the window, because a section taller than
   the screen would have its own bottom snapped out of reach. */
html.snap{scroll-snap-type:y mandatory}
html.snap .beat{scroll-snap-align:start;scroll-snap-stop:always}
/* The footer is a strip below the last beat's stop. Aligned to the bottom edge
   it becomes a stop of its own rather than somewhere you cannot get to. */
html.snap footer{scroll-snap-align:end}
/* While the page is being carried by hand the scroller's own snapping stands
   down, so the two are not pulling at the same page at once. */
html.snap.gliding{scroll-snap-type:none}
.label{margin:0 0 2.5rem;font:500 .66rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gold)}
.display{margin:0;font-family:var(--serif);font-weight:300;line-height:.98;letter-spacing:-.015em;
  font-size:clamp(2.6rem,7.4vw,6.1rem)}
.display .br{display:block}
.sub{margin:2rem 0 0;font:400 clamp(.95rem,1.5vw,1.15rem)/1.5 var(--sans);letter-spacing:.02em;color:var(--muted)}
.sub b{color:var(--text);font-weight:400}

/* ---- 1 hero ---- */
#hero{justify-content:flex-end;padding-bottom:6vh}
#hero .display{max-width:16ch}
.scroll-cue{margin:5rem 0 0;width:max-content;font:500 .62rem/1 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:.8rem;text-decoration:none;cursor:pointer;transition:color .25s}
.scroll-cue::after{content:"";width:46px;height:1px;background:var(--gold-dim);animation:cue 2.6s ease-in-out infinite}
.scroll-cue:hover{color:var(--text)}
@keyframes cue{0%,100%{transform:translateX(0);opacity:.4}50%{transform:translateX(10px);opacity:1}}

/* ---- 2 hinge ---- */
#hinge{align-items:center;text-align:center}
#hinge .display{max-width:none}

/* ---- 3 result ---- */
#resultat .display{max-width:14ch}
/* The arrow that means "this leaves the page". It belongs to the doorway now
   that the shelf of products is gone -- the apps have a site of their own and
   the contact beat links to it. */
.out{font-size:.78rem;letter-spacing:0;line-height:1;color:var(--gold-dim);
  transition:transform .3s cubic-bezier(.22,.61,.36,1),color .3s}