/* ==========================================================================
   Oplo — the front page.

   Loaded by index.html and nothing else, on top of oplo-design.css. A picture,
   then cards on bands, laid out the way a newsroom is. Nothing here moves,
   glows or reacts to the pointer; the only motion on the page is the site's own
   fade-in as a card scrolls into view (oplo-motion.js).
   ========================================================================== */

/* ------------------------------------------------------------------ Hero
   Two thirds of the window, from the top edge — the bar sits over it, so the
   glass has the picture to frost. The floor keeps the lettering whole in a
   window too short for two thirds to be enough. The band is painted in the
   picture's own black, so nothing flashes white while it arrives. */
.band.art.hero {
  position: relative;
  height: max(66.667vh, 440px);
  height: max(66.667svh, 440px);
  min-height: 0;
  justify-content: flex-end;
  background: #02050b;
  isolation: isolate;
}
/* Cropped from the bottom, never the top: the word is in the upper part of the
   picture and the planet's edge under it. */
.hero > .hero-img {
  position: absolute; z-index: 0; inset: 0;
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 0;
  pointer-events: none;
}
.band.art.hero::after { z-index: 1; }

/* The two buttons, centred at the foot of the picture. */
.band.art.hero > .hero-foot {
  z-index: 2;
  padding: 0 max(var(--gutter), env(safe-area-inset-left)) clamp(32px, 8vh, 64px);
  text-align: center;
}
.hero-ctas { display: flex; justify-content: center; gap: 17px; }

/* ------------------------------------------------------------------- Pills
   apple.com's opener buttons: a filled blue pill and an outlined one, 44px
   tall at 17px. The only buttons on the front page. */
.pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 21px; border: 1px solid transparent; border-radius: 980px;
  font: 400 17px/21px var(--text); letter-spacing: -.005em; white-space: nowrap;
  background: #0071e3; color: #fff;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.pill:hover { background: #0077ed; }
.pill.alt { background: transparent; color: var(--blue-dark); border-color: var(--blue-dark); }
.pill.alt:hover { background: rgba(41, 151, 255, .12); }
.pill:focus-visible { outline: 2px solid var(--blue-dark); outline-offset: 2px; }

/* ------------------------------------------------------------------- Bands
   Dark, grey, white, grey: each a full-width ground with the cards held to the
   same 1024px as the bar and the footer, so the three share their edges. The
   first band is the picture's own black, so the night runs on from the picture. */
.hs { padding: clamp(64px, 8vw, 104px) 0; background: var(--paper); color: var(--ink); }
.hs.dark {
  /* The picture's last row, under its own shade, is about #0d0b11, not the black
     below it; the first 200px ease from one to the other so no edge shows. */
  background: linear-gradient(180deg, #0d0b11, #02050b 200px) top / 100% 200px no-repeat, #02050b;
  color: var(--ink-lt); padding-top: clamp(72px, 10vw, 120px);
}
.hs.grey { background: var(--canvas); }
.hs-in {
  max-width: 1024px; margin: 0 auto;
  padding: 0 max(var(--gutter), env(safe-area-inset-right)) 0 max(var(--gutter), env(safe-area-inset-left));
}
.hs-h {
  margin-bottom: clamp(18px, 2.2vw, 26px);
  font: 600 clamp(22px, 2.2vw, 28px)/1.15 var(--font); letter-spacing: .007em;
}
.hs.dark .hs-h { color: var(--ink-lt); }

/* What OploCloud is, before anything is sold, in the largest type under the
   picture. */
.hs-lead { max-width: 820px; margin: 0 auto clamp(56px, 8vw, 96px); text-align: center; }
.hs-lead .t-display { font-size: clamp(30px, 3.6vw, 52px); line-height: 1.1; letter-spacing: -.02em; color: #fff; }
.hs-lead .t-lead { margin-top: 22px; color: var(--ink-lt-2); text-wrap: pretty; }
.hs-lead .cta-row { margin-top: 28px; gap: 10px 32px; }
.hs-lead .cta { color: var(--blue-dark); }

/* ------------------------------------------------------------------- Cards
   Six columns, so a card is 6 wide (words beside a picture), 3 wide (two side
   by side) or 2 wide (three). The picture is a soft panel with one fine line
   drawing in it, until there is a photograph to put there: an <img> inside
   .hc-pic covers the panel and hides the drawing. */
.hs-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
.hc {
  display: grid; overflow: hidden; border-radius: 20px;
  background: #fff; color: var(--ink);
}
.hc:focus-visible { outline-offset: 3px; border-radius: 20px; }
.hc.wide  { grid-column: span 6; grid-template-columns: 1.9fr 1fr; min-height: 340px; }
.hc.flip  { grid-template-columns: 1fr 1.9fr; }
.hc.flip .hc-pic { order: 2; }
.hc.half  { grid-column: span 3; grid-template-rows: auto 1fr; }
.hc.third { grid-column: span 2; grid-template-rows: auto 1fr; }
.hs.dark .hc { background: #000; }

.hc-pic {
  position: relative; display: grid; place-items: center; min-height: 0; overflow: hidden;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(255,255,255,.8), rgba(255,255,255,0) 72%),
    linear-gradient(145deg, hsl(var(--h) 22% 96%), hsl(calc(var(--h) + 14) 20% 90%));
  color: hsl(var(--h) 26% 48% / .8);
}
.half .hc-pic  { aspect-ratio: 16 / 9; }
.third .hc-pic { aspect-ratio: 16 / 10; }
.hc-pic svg { width: clamp(72px, 8.5vw, 120px); height: auto; stroke-width: 1.25; }
.half .hc-pic svg, .third .hc-pic svg { width: clamp(56px, 6vw, 84px); }
.hc-pic svg * { vector-effect: non-scaling-stroke; }
.hc-pic > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hc-pic:has(> img) > svg { display: none; }

.hc-text { display: flex; flex-direction: column; padding: clamp(22px, 2.6vw, 32px); }
.hc-kick {
  margin-bottom: 10px;
  font: 600 11px/14px var(--text); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
}
.hc-title { font: 600 clamp(20px, 2vw, 25px)/1.14 var(--font); letter-spacing: -.01em; text-wrap: balance; }
.wide .hc-title { font-size: clamp(22px, 2.4vw, 30px); }
.hc-line { margin-top: 10px; font-size: 15px; line-height: 1.4; letter-spacing: -.01em; color: var(--ink-2); text-wrap: pretty; }
.hc-link { margin-top: auto; padding-top: 20px; font-size: 14px; line-height: 1.3; color: var(--blue); }
.hc-link::after { content: " \203A"; }
.hc:hover .hc-link { text-decoration: underline; }
.hs.dark .hc-kick, .hs.dark .hc-line { color: var(--ink-lt-2); }
.hs.dark .hc-title { color: #fff; }
.hs.dark .hc-link { color: var(--blue-dark); }

/* ----------------------------------------------------------------- Company
   Nothing to show yet but a sentence and where to go, so that is all there is. */
.hs.centre { text-align: center; padding: clamp(72px, 10vw, 128px) 0; }
.hs.centre .t-display { max-width: 16em; margin-inline: auto; letter-spacing: -.02em; }
.hs.centre .t-lead { margin: 16px auto 0; max-width: 28em; }
.hs-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 30px; }
.hs-pill {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 20px; border-radius: 980px;
  background: rgba(0,0,0,.06); color: var(--ink);
  font: 600 14px/1 var(--text); letter-spacing: -.01em; white-space: nowrap;
  transition: background .25s var(--ease);
}
.hs-pill:hover { background: rgba(0,0,0,.1); }

/* -------------------------------------------------------------------- List
   Two columns of lines held apart by hairlines, a small tile beside each. */
.hs-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(32px, 6vw, 64px); }
.hr { display: flex; align-items: center; gap: 20px; padding: 26px 0; border-bottom: 1px solid var(--rule); }
.hs-list li:nth-last-child(-n+2) .hr { border-bottom: 0; }
.hr-pic {
  flex: none; display: grid; place-items: center; width: 72px; height: 72px; border-radius: 16px; overflow: hidden;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(255,255,255,.8), rgba(255,255,255,0) 72%),
    linear-gradient(145deg, hsl(var(--h) 22% 97%), hsl(calc(var(--h) + 14) 20% 91%));
  color: hsl(var(--h) 26% 48% / .85);
}
.hr-pic svg { width: 30px; height: auto; stroke-width: 1.3; }
.hr-pic svg * { vector-effect: non-scaling-stroke; }
.hr-text { min-width: 0; }
.hr .hc-kick { margin-bottom: 6px; }
.hr h3 { font: 600 17px/1.25 var(--font); letter-spacing: -.01em; text-wrap: balance; }
.hr-line { margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--ink-2); text-wrap: pretty; }
.hr:hover h3 { color: var(--blue); }
.hs-more { margin-top: clamp(28px, 4vw, 44px); text-align: center; }
.hs.tail { padding-bottom: clamp(56px, 7vw, 88px); }

/* ------------------------------------------------------ A narrower window
   Under 900px the three small cards lie down: picture beside words. */
@media (max-width: 899px) {
  .hc.third { grid-column: span 6; grid-template-columns: 1fr 1.3fr; grid-template-rows: auto; }
  .third .hc-pic { aspect-ratio: auto; }
}

/* -------------------------------------------------------------- Small screens
   The picture is shown by its upper part so the word stays whole, the two
   buttons shrink to fit under it, and every card stands up: picture over words. */
@media (max-width: 734px) {
  .band.art.hero {
    height: 66.667svh; min-height: 0;
    padding-top: 0; justify-content: flex-end;
  }
  .hero > .hero-img {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover; object-position: 50% 30%;
  }
  .band.art.hero > .hero-foot {
    padding: 0 16px max(44px, calc(env(safe-area-inset-bottom) + 20px));
  }
  .hero-ctas { gap: 10px; flex-wrap: wrap; justify-content: center; }
  .pill { font-size: 14px; min-height: 36px; padding: 0 16px; border-radius: 980px; }

  .hs { padding: 52px 0; }
  .hs.dark { padding-top: 56px; }
  .hs-lead { margin-bottom: 44px; }
  .hs-lead .t-display { font-size: 26px; line-height: 1.14; }
  .hs-lead .t-lead { margin-top: 14px; font-size: 16px; line-height: 1.45; }
  .hs-lead .cta-row { margin-top: 18px; gap: 8px 24px; }

  .hs-grid { gap: 14px; }
  .hc.wide, .hc.half, .hc.third { grid-column: span 6; grid-template-columns: 1fr; grid-template-rows: auto 1fr; min-height: 0; }
  .hc.flip .hc-pic { order: 0; }
  .hc.wide .hc-pic, .hc.third .hc-pic { aspect-ratio: 16 / 9; }
  .hc-pic svg { width: 72px; }
  .hc-text { padding: 22px; }
  .hc-title, .wide .hc-title { font-size: 22px; }

  .hs.centre { padding: 56px 0; }
  .hs-list { grid-template-columns: 1fr; }
  .hs-list li:nth-last-child(2) .hr { border-bottom: 1px solid var(--rule); }
  .hr { padding: 20px 0; gap: 16px; }
  .hr-pic { width: 60px; height: 60px; border-radius: 14px; }
}