/* Full-bleed heroes. The whole band is the asset: a photograph or a paper
   ground edge to edge, the app hovering in it, and clutter floating around
   it that drifts a little with the pointer. */

.fhero{position:relative;overflow:hidden;isolation:isolate;
  min-height:clamp(540px,78vh,760px);display:grid;align-items:center;
  background-position:center;background-size:cover;
  /* the margin doodles may poke past a phone's edge; clip without changing layout */
  overflow-x:clip}
.fhero__inner{max-width:var(--site-max);margin:0 auto;width:100%;
  padding:clamp(2rem,5vw,3.5rem) var(--gutter);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:clamp(2rem,5vw,3.4rem);align-items:center;position:relative;z-index:2}

/* a soft wash under the copy so type stays readable on a photograph */
.fhero__wash{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg, rgba(255,255,255,.92) 0 26%,
             rgba(255,255,255,.70) 42%, rgba(255,255,255,0) 62%)}
.fhero--dark .fhero__wash{background:linear-gradient(100deg, rgba(20,16,12,.72) 0 28%,
             rgba(20,16,12,.45) 46%, rgba(20,16,12,0) 66%)}
.fhero--dark, .fhero--dark .hero__lede{color:var(--warm-white)}
.fhero--dark .eyebrow{color:#cfe3ff}

.fhero h1{font-size:clamp(2.2rem,4.6vw,3.6rem);letter-spacing:-.015em}
.fhero .hero__lede{margin-top:1rem;font-size:1.08rem;color:var(--text-muted);max-width:34ch}
.fhero .signup{margin-top:1.5rem}
.fhero--dark h1{color:var(--warm-white)}
.fhero--dark .hero__lede{color:rgba(255,249,240,.86)}
.fhero--dark .eyebrow{color:#bcd7ff}

/* ---- the app, hovering ---- */
.fstage{position:relative;display:grid;place-items:center;min-height:clamp(300px,40vw,460px)}

/* The device drifts. Two wrappers rather than one, so the horizontal and
   vertical swings can run at different periods: 11s across, 7.4s up and
   down, 17s of roll. Nothing divides evenly, so the path never repeats the
   same loop and it reads as drift rather than as an orbit. */
.fbob{animation:bobX 14s ease-in-out infinite;width:min(100%,560px)}
.fbob__y{animation:bobY 9.6s ease-in-out infinite}
.fbob__r{animation:bobR 22s ease-in-out infinite}
@keyframes bobX{0%,100%{transform:translateX(-4px)} 50%{transform:translateX(4px)}}
@keyframes bobY{0%,100%{transform:translateY(-2.5px)} 50%{transform:translateY(2.5px)}}
@keyframes bobR{0%,100%{transform:rotate(-.14deg)}  50%{transform:rotate(.14deg)}}
@media (prefers-reduced-motion: reduce){
  .fbob,.fbob__y,.fbob__r{animation:none}
}
.fdev{position:relative;width:100%;
  /* a tablet, not a black rectangle: an aluminium edge catching the light,
     a dark bezel inside it, and a screen inset into that */
  --bezel:2.4%;
  background:linear-gradient(152deg, #4a5058 0%, #23262c 26%, #16181d 55%, #2c3037 100%);
  border-radius:clamp(18px,4.2%,30px);
  padding:var(--bezel);
  transform:var(--dev-tf, perspective(1600px) rotateY(-15deg) rotateX(7deg) rotate(-1.5deg));
  box-shadow:
    0 0 0 1px rgba(0,0,0,.55),
    inset 0 0 0 1px rgba(255,255,255,.22),
    inset 0 2px 1px rgba(255,255,255,.30),
    inset 0 -2px 2px rgba(0,0,0,.45),
    0 6px 14px rgba(20,16,12,.28),
    0 40px 70px rgba(20,16,12,.42);
  will-change:transform}
.fdev--anim{transition:transform .18s ease-out}

.fdev__screen{position:relative;border-radius:clamp(10px,2.6%,18px);overflow:hidden;background:#000;
  aspect-ratio:4/3;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.85), inset 0 1px 6px rgba(0,0,0,.55)}
.fdev__screen img,
.fdev__screen video{width:100%;height:100%;object-fit:cover;display:block;
  transform:scale(1.36) translateY(-3%)}
/* the trailer is a 4:3 screen recording, same shape as the screen: show all of it */
.fdev__screen video{transform:none}
/* the glass: one broad sheen and a faint edge light down the left */
.fdev__screen::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(112deg, rgba(255,255,255,.24) 0 15%, rgba(255,255,255,.06) 28%, transparent 46%),
    linear-gradient(90deg, rgba(255,255,255,.10) 0 1.5%, transparent 4%)}

/* front camera, centred on the long edge the way a landscape tablet has it */
.fdev__cam{position:absolute;top:calc(var(--bezel) / 2);left:50%;transform:translate(-50%,-50%);
  width:6px;height:6px;border-radius:50%;background:#0a0c0f;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16), 0 0 2px rgba(255,255,255,.10)}
/* the buttons on the edge */
.fdev__btn{position:absolute;background:#3d434b;border-radius:2px;
  box-shadow:0 0 0 1px rgba(0,0,0,.45)}
.fdev__btn--power{right:-2px;top:22%;width:3px;height:7%}
.fdev__btn--vol{right:-2px;top:38%;width:3px;height:11%}

/* the shadow it casts on whatever is underneath */
.fdev__cast{position:absolute;left:12%;right:-2%;bottom:-10%;height:17%;z-index:-1;
  background:radial-gradient(ellipse at center, rgba(20,16,12,.44), transparent 70%);
  filter:blur(18px)}

/* ---- floating clutter ---- */
.clutter{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.clutter img{position:absolute;width:var(--w,90px);
  left:var(--x,50%);top:var(--y,50%);
  transform:translate(-50%,-50%) rotate(var(--r,0deg))}

/* Doodles are drawn ON the paper, so they cast nothing at all. A sticker is
   stuck to it and lifts by about a millimetre, so it gets a tight edge
   shadow rather than the soft hovering one. Notes are paper on paper, a
   shade deeper. */
.clutter img{filter:none}
.clutter img[src*="sticker"]{filter:drop-shadow(1px 1.5px .5px rgba(20,16,12,.34))}
.clutter img[src*="note-"]{filter:drop-shadow(1px 2px 1.5px rgba(20,16,12,.22))}

/* ---- the doodled graph ground, no photograph at all ---- */
.fhero--graph{background-color:#fff;
  background-image:
    linear-gradient(rgba(77,150,255,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(77,150,255,.10) 1px, transparent 1px),
    radial-gradient(rgba(77,150,255,.26) 1.6px, transparent 1.7px);
  background-size:24px 24px, 24px 24px, 96px 96px}
.fhero--graph .fhero__wash{display:none}

/* a strip of tape, for the paper ground */
.ftape{position:absolute;z-index:4;width:120px;height:30px;background:rgba(255,246,214,.78);
  box-shadow:0 1px 3px rgba(0,0,0,.16);pointer-events:none}

/* lab chrome */
.flab{border-top:1px solid var(--line)}
.flab__head{padding:1.8rem 0 1.4rem}
.flab__head .lab__label{margin-bottom:.3rem}

@media (max-width:900px){
  .fhero__inner{grid-template-columns:1fr}
  .fhero__wash{background:linear-gradient(180deg, rgba(255,255,255,.90) 0 58%, rgba(255,255,255,.70) 100%)}
  .fhero--dark .fhero__wash{background:linear-gradient(180deg, rgba(20,16,12,.75) 0 58%, rgba(20,16,12,.5) 100%)}
  .clutter img{--w:64px}
}