/* EYOX phone-case PREMIUM mockups.
   Minimal soft-touch cases shown as a realistic product render (material, camera
   bump, studio shadow) rather than a flat 1:1 artwork. The brand "flat, no
   shadow" rule governs the app UI; this depicts a physical object, where light
   and material are what make it read premium instead of corporate.
   The 1:1 print-ready artwork (exact size, camera cutout) follows once a colour
   and the phone model (OPS-22) are chosen. */

html, body { margin: 0; height: 100%; }
body.stage {
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 90% at 50% 16%, #F1F4F6 0%, #E4E9EC 55%, #D7DDE1 100%);
  font-family: var(--font);
  padding: 56px;
  box-sizing: border-box;
}

.phone {
  position: relative;
  width: 300px; height: 632px;
  border-radius: 46px;
  box-shadow: 0 44px 82px rgba(22,44,58,0.30), 0 10px 26px rgba(22,44,58,0.20);
}
.phone::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,0.20),
    inset 0 -3px 8px rgba(0,0,0,0.14),
    inset 0 0 0 1px rgba(255,255,255,0.05);
}

.camera {
  position: absolute; top: 22px; left: 22px;
  width: 108px; height: 108px; border-radius: 30px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.22), inset 0 1px 1px rgba(255,255,255,0.16);
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
  place-items: center; padding: 10px; box-sizing: border-box;
}
.lens {
  width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle at 36% 32%, #6E8C93 0%, #22343A 40%, #0E1B1F 100%);
  box-shadow: 0 0 0 2px rgba(0,0,0,0.22), inset 0 0 4px rgba(0,0,0,0.6);
  position: relative;
}
.lens::after { content:""; position:absolute; top:7px; left:9px; width:7px; height:7px; border-radius:50%; background: rgba(255,255,255,0.5); filter: blur(0.4px); }
.flash { width: 14px; height: 14px; border-radius:50%; background: radial-gradient(circle at 40% 35%, #FBFBEF, #C9CDBE); box-shadow: inset 0 0 3px rgba(0,0,0,0.3); }

.logo {
  position: absolute; left: 0; right: 0; top: 300px;
  display: flex; align-items: center; justify-content: center; gap: 9px;
}
.logo .wm { width: 120px; display: block; }
.logo .pn { font-size: 27px; font-weight: 600; letter-spacing: -0.01em; }

/* engraved light logo (for dark/mid colourways) */
.logo.light .wm { opacity: 0.62; filter: drop-shadow(0 -0.8px 0 rgba(0,0,0,0.24)) drop-shadow(0 1.4px 0.2px rgba(255,255,255,0.34)); }
.logo.light .pn { color: rgba(255,255,255,0.62); text-shadow: 0 -0.8px 0 rgba(0,0,0,0.22), 0 1.4px 0 rgba(255,255,255,0.34); }

/* engraved dark logo (for light colourways) */
.logo.dark .wm { opacity: 0.72; filter: drop-shadow(0 1px 0 rgba(255,255,255,0.55)); }
.logo.dark .pn { color: rgba(27,64,121,0.72); text-shadow: 0 1px 0 rgba(255,255,255,0.55); }

/* ---------------- colourways ---------------- */

.cw-teal {
  background:
    radial-gradient(130% 100% at 28% 10%, rgba(255,255,255,0.16), rgba(255,255,255,0) 46%),
    linear-gradient(158deg, #52808A 0%, #4A737D 42%, #416670 100%);
}
.cw-teal .camera { background: linear-gradient(150deg, #4C7A84, #3C616B); }

.cw-midnight {
  background:
    radial-gradient(130% 100% at 28% 10%, rgba(255,255,255,0.12), rgba(255,255,255,0) 46%),
    linear-gradient(158deg, #2C4E58 0%, #24424B 42%, #1B353D 100%);
}
.cw-midnight .camera { background: linear-gradient(150deg, #27505A, #17303A); }

.cw-slate {
  background:
    radial-gradient(130% 100% at 28% 10%, rgba(255,255,255,0.13), rgba(255,255,255,0) 46%),
    linear-gradient(158deg, #475762 0%, #3C4A55 42%, #323E48 100%);
}
.cw-slate .camera { background: linear-gradient(150deg, #414F5A, #2D3842); }

.cw-mist {
  background:
    radial-gradient(130% 100% at 28% 10%, rgba(255,255,255,0.4), rgba(255,255,255,0) 46%),
    linear-gradient(158deg, #CFE0E4 0%, #C3D9DE 42%, #B2CBD1 100%);
}
.cw-mist .camera { background: linear-gradient(150deg, #BCCED3, #A6BFC5); }
.cw-mist.phone::after { box-shadow: inset 0 1.5px 1px rgba(255,255,255,0.5), inset 0 -3px 8px rgba(0,0,0,0.08), inset 0 0 0 1px rgba(255,255,255,0.14); }

.cw-stone {
  background:
    radial-gradient(130% 100% at 28% 10%, rgba(255,255,255,0.45), rgba(255,255,255,0) 46%),
    linear-gradient(158deg, #F0EDE5 0%, #E7E3DA 42%, #D9D3C8 100%);
}
.cw-stone .camera { background: linear-gradient(150deg, #E3DED3, #CFC9BC); }
.cw-stone.phone::after { box-shadow: inset 0 1.5px 1px rgba(255,255,255,0.6), inset 0 -3px 8px rgba(0,0,0,0.07), inset 0 0 0 1px rgba(255,255,255,0.18); }

/* ---------------- design treatments (all on ONE colourway) ----------------
   These are genuinely different designs, not colour swaps: placement,
   composition, and material moves, each shown in the signature teal so the
   design is the variable. */

.logo.at-bottom { top: auto; bottom: 60px; }
.logo.at-top    { top: 156px; }

.logo.at-corner {
  top: auto; bottom: 42px; left: 30px; right: auto; justify-content: flex-start;
}
.logo.at-corner .wm { width: 92px; }
.logo.at-corner .pn { font-size: 21px; }

/* two-tone colour dip: a darker tonal band across the lower third */
.dip {
  position: absolute; left: 0; right: 0; bottom: 0; height: 200px;
  border-radius: 0 0 46px 46px;
  background: linear-gradient(180deg, #3F656F 0%, #385A64 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.10);
}
.logo.on-dip { top: auto; bottom: 88px; }

/* recessed engraved plaque holding the logo */
.plaque {
  position: absolute; left: 58px; right: 58px; top: 276px; height: 86px;
  border-radius: 16px;
  background: linear-gradient(180deg, #446B75, #3D626C);
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.30), inset 0 -1px 0 rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
}
.plaque .logo { position: static; }
.plaque .logo .wm { width: 104px; }
.plaque .logo .pn { font-size: 23px; }

/* single hairline accent */
.hline {
  position: absolute; left: 68px; right: 68px; top: 294px; height: 1.5px;
  background: rgba(255,255,255,0.30);
}
.logo.under-line { top: 310px; }

/* vertical two-tone: a darker teal band down the right edge */
.vband {
  position: absolute; right: 0; top: 0; bottom: 0; width: 100px;
  border-radius: 0 46px 46px 0;
  background: linear-gradient(90deg, #40666F, #3A606A);
  box-shadow: inset 1px 0 0 rgba(255,255,255,0.08);
}
.logo.left-area { left: 14px; right: 100px; }
.logo.left-area .wm { width: 104px; }
.logo.left-area .pn { font-size: 23px; }

/* stacked, larger typographic lockup */
.logo.stacked { top: 262px; flex-direction: column; gap: 0; }
.logo.stacked .wm { width: 170px; }
.logo.stacked .pn { font-size: 42px; margin-top: 2px; }