/* DelTeQ Web Services — coming-soon page.
   Every colour, size, radius and type role below comes from the Refuells design
   system tokens in _ds/…/tokens. Nothing here invents a value. */

html,
body {
  margin: 0;
  padding: 0;
  background: var(--surface);
}

body {
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--primary);
  text-decoration: none;
}

a:hover {
  color: var(--secondary);
}

svg {
  display: inline-flex;
  flex: none;
}

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: var(--radius-xs);
}

@keyframes riseIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---------------------------------------------------------------- shell -- */

/* The design's 64px rhythm and 40/32 padding assume a tall window. On a laptop
   the page is ~170px too tall for that and the footer falls below the fold, so
   the spacing scales with viewport height and only reaches the design values
   once there is room for them. */
.page {
  position: relative;
  min-height: 100vh;
  background: var(--surface);
  color: var(--text-1);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(20px, 3.4vh, 40px) 24px clamp(16px, 2.8vh, 32px);
  box-sizing: border-box;
  gap: clamp(24px, 4.2vh, 64px);
  overflow: hidden;
}

/* every top-level block shares one measure, and stacks above the backdrop */
.band {
  position: relative;
  width: 100%;
  max-width: 1080px;
}

/* ------------------------------------------------------------ backdrop --
   Photograph behind the top of the page, knocked back and then washed out to
   flat --surface by the time the services row starts. Out of flow, so it takes
   no part in the .page column. The gradient stops are --surface (#081120) at
   rising alpha — written literally because a gradient can't take a token's
   colour at an arbitrary opacity. */

.backdrop {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 860px;
  overflow: hidden;
  pointer-events: none;
  animation: fadeIn 1.1s ease both;
}

.backdrop img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: .85;
  filter: saturate(.65) contrast(1.05);
}

.backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(8, 17, 32, 0.35) 0%,
    rgba(8, 17, 32, 0.62) 42%,
    rgba(8, 17, 32, 0.90) 78%,
    #081120 100%
  );
}

/* Narrow viewports crop the photo hard (object-fit: cover on a 375px box), so
   its code text lands enlarged directly behind the lede and buttons. The band
   is still 860px, so the fix is only to carry the scrim up faster. Delete this
   block to get the design's single gradient at every width. */
@media (max-width: 640px) {
  .backdrop::after {
    background: linear-gradient(
      to bottom,
      rgba(8, 17, 32, 0.45) 0%,
      rgba(8, 17, 32, 0.80) 34%,
      rgba(8, 17, 32, 0.94) 62%,
      #081120 88%
    );
  }
}

/* ------------------------------------------------------------ masthead -- */

.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  animation: fadeIn .5s ease both;
}

.masthead__logo {
  height: 46px;
  width: auto;
  display: block;
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: var(--radius-full);
  background: var(--card-fill);
  border: 1px solid var(--card-stroke);
}

.status__dot {
  width: 7px;
  height: 7px;
  border-radius: var(--radius-full);
  background: var(--accent);
  display: block;
}

.status__label {
  font: var(--type-label);
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--text-60);
}

/* ---------------------------------------------------------------- hero -- */

.hero {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 48px;
  align-items: center;
}

.hero__intro {
  display: flex;
  flex-direction: column;
  gap: 28px;
  animation: riseIn .6s ease both .08s;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.eyebrow {
  font: var(--type-label);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  color: var(--primary);
}

/* Max size is 52px, not the design's 62px. The hero is a two-column grid inside
   a 1080px band, so this column is 516px wide however wide the window gets — and
   at 62px the line "your business runs on." measures 611px, so it wrapped and the
   title ran to three lines, 85px taller than the <br> composition intends. */
.hero__title {
  margin: 0;
  font: var(--type-title-xl);
  font-size: clamp(38px, 6vw, 52px);
  line-height: 1.04;
  letter-spacing: -1.2px;
  font-weight: var(--w-bold);
  text-wrap: pretty;
}

.hero__lede {
  margin: 0;
  font: var(--type-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-60);
  max-width: 46ch;
  text-wrap: pretty;
}

/* -------------------------------------------------------------- button --
   Mirrors RefuellsDesignSystem.Button: 50px tall, radius md, body type at 600.
   primary = solid accent (the one press-target colour), secondary = outlined
   in primary. Press is opacity .7, as in the app's HighlightButtonStyle. */

.cta {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* Shown only when a mailto: click went nowhere. [hidden] keeps it out of the
   flex flow entirely, so it costs no gap until it has something to say. */
.mail-fallback {
  margin: 0;
  font: var(--type-subhead);
  color: var(--text-60);
}

.mail-fallback[hidden] {
  display: none;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  box-sizing: border-box;
  height: 50px;
  padding: 0 var(--space-lg);
  border: none;
  border-radius: var(--radius-md);
  font: var(--type-body);
  font-family: var(--font);
  font-weight: var(--w-semibold);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: opacity .12s ease;
}

.btn:active {
  opacity: .7;
}

.btn--primary,
.btn--primary:hover {
  background: var(--accent);
  color: #fff;
}

.btn--secondary,
.btn--secondary:hover {
  background: transparent;
  color: var(--primary);
  border: 1.5px solid var(--primary);
}

/* ------------------------------------------------------------ contacts -- */

.contacts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.contact {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-radius: var(--radius-md);
  background: var(--card-fill);
  border: 1px solid var(--card-stroke);
  transition: border-color .15s ease;
}

.contact:hover {
  border-color: rgba(62, 155, 255, 0.34);
}

.contact svg {
  width: 16px;
  height: 16px;
}

.contact a,
.contact a:hover {
  font: var(--type-subhead);
  color: var(--text-1);
}

.contact--mail svg { color: var(--primary); }
.contact--whatsapp svg { color: var(--rate-perfect); }

/* ------------------------------------------------------- selected work -- */

.work {
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: riseIn .6s ease both .2s;
}

.work__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.work__eyebrow {
  font: var(--type-label);
  font-size: 10px;
  letter-spacing: var(--label-tracking);
  text-transform: uppercase;
  color: var(--text-45);
}

.work__note {
  font: var(--type-caption);
  color: var(--text-40);
}

.work__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px;
}

.work__card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px;
  border-radius: var(--radius-lg);
  background: var(--card-fill);
  border: 1px solid var(--card-stroke);
}

/* Screenshot well. Holds a 9:16 crop of a phone screenshot; swapping the <img>
   is the only edit needed to change a card. */
.shot {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--card-fill-raised);
  display: grid;
  place-items: center;
  color: var(--text-30);
}

/* The screenshots are 9:19.5, so cover trims about 9% off the top and bottom —
   which lands well: the iOS status bar and the tab bar go, each app's title row
   stays. border-radius is repeated on the image itself because overflow: hidden
   alone leaves a hairline of square corner on WebKit once the card composites. */
.shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

.work__label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 2px 2px;
}

.work__name {
  font: var(--type-subhead);
  font-weight: var(--w-semibold);
  color: var(--text-1);
}

.work__meta {
  font: var(--type-caption);
  color: var(--text-40);
}

/* Apple's supplied badge. It carries its own black pill and wordmark, so it
   takes no token styling — it only scales down to the card's inner width. */
.appstore {
  display: block;
  margin: 0 2px 2px;
  transition: opacity .12s ease;
}

.appstore img {
  display: block;
  width: 100%;
  max-width: 132px;
  height: auto;
}

.appstore:hover { opacity: .8; }
.appstore:active { opacity: .7; }

/* ------------------------------------------------------------ services -- */

.services {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  animation: riseIn .6s ease both .3s;
}

.service {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  border-radius: var(--radius-lg);
  background: var(--card-fill);
  border: 1px solid var(--card-stroke);
}

.service svg {
  width: 18px;
  height: 18px;
}

.service--mobile svg { color: var(--icon-vehicle, var(--primary)); }
.service--web svg    { color: var(--primary); }
.service--host svg   { color: var(--secondary); }

.service__title {
  font: var(--type-headline);
  color: var(--text-1);
}

.service__body {
  font: var(--type-subhead);
  color: var(--text-55);
  line-height: 1.5;
}

/* ------------------------------------------------------------ colophon -- */

/* No margin-top: auto here. On a viewport taller than the content that would
   absorb every spare pixel and strand the footer at the bottom of the window,
   far below the services row. Letting it sit in the normal flow keeps the page
   gap; the surface below it is the same colour, so there is no visible seam. */
.colophon {
  padding-top: clamp(14px, 2.2vh, 24px);
  border-top: 1px solid var(--divider);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  animation: fadeIn .6s ease both .4s;
}

.colophon span {
  font: var(--type-caption);
  color: var(--text-40);
}

/* ----------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    transition-duration: .001ms !important;
  }
}