/* ------------------------------------------------------------------
   Aalixer - identity drawn from the mark.

   The logo is an alchemical elixir: midnight navy, antique gold, a
   high-contrast serif wordmark. The page follows it rather than the
   other way round. Gold is the only accent and is spent sparingly, so
   the emblem stays the brightest thing on the page.
   ------------------------------------------------------------------ */

:root {
  --midnight:  #0b1024;
  --deep:      #070b18;
  --panel:     #111a34;
  --raise:     #16203e;
  --line:      #26314f;

  --cream:     #ece6d7;
  --muted:     #97a3c2;

  --gold:      #c9a227;
  --gold-lt:   #e8c766;
  --gold-pale: #f3e6bd;
  --elixir:    #7fb3e8;

  --shell: min(1120px, 100% - 3rem);
  --step:  clamp(4.5rem, 9vw, 8rem);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--midnight);
  color: var(--cream);
  font: 400 1.0625rem/1.7 Karla, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Light from behind the bottle, as if the elixir is lit. */
body::before {
  content: "";
  position: fixed;
  inset: -15% -10% auto -10%;
  height: 75vh;
  background:
    radial-gradient(46% 55% at 50% 0%, rgba(201, 162, 39, .13), transparent 68%),
    radial-gradient(60% 50% at 78% 12%, rgba(127, 179, 232, .08), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

h1, h2, h3 {
  margin: 0;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  line-height: 1.06;
  letter-spacing: -.005em;
  text-wrap: balance;
}

p { margin: 0; }
a { color: inherit; }

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

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 1rem; top: 1rem; z-index: 20;
  padding: .6rem 1rem;
  background: var(--cream);
  color: var(--midnight);
  border-radius: 4px;
}

/* --- top bar ---------------------------------------------------- */

.bar {
  position: relative;
  z-index: 3;
  width: var(--shell);
  margin: 0 auto;
  padding: 1.35rem 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.bar__mark {
  display: flex;
  align-items: center;
  gap: .7rem;
  text-decoration: none;
}

.bar__mark img { display: block; width: auto; height: 38px; }

/* The wordmark is live text, not the baked-in one - at this size the
   original lettering would be an illegible smudge. */
.bar__word {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.32rem;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--cream);
}

.bar__nav {
  display: flex;
  gap: 1.9rem;
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.bar__nav a {
  color: var(--muted);
  text-decoration: none;
  transition: color .18s ease;
}
.bar__nav a:hover { color: var(--gold-lt); }

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

.hero {
  position: relative;
  z-index: 1;
  width: var(--shell);
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4.5rem) 0 var(--step);
  text-align: center;
}

.hero__motes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero__emblem {
  position: relative;
  display: inline-block;
  width: clamp(150px, 27vw, 260px);
  height: auto;
  /* The artwork carries its own glow; this just seats it on the navy. */
  filter: drop-shadow(0 12px 40px rgba(201, 162, 39, .22));
}

.eyebrow {
  position: relative;
  margin: 1.9rem 0 1.1rem;
  font-size: .76rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
}

.hero__title {
  position: relative;
  font-size: clamp(2.6rem, 6.5vw, 4.9rem);
  max-width: 18ch;
  margin: 0 auto;
}

.hero__title em {
  font-style: italic;
  color: var(--gold-lt);
}

.hero__lede {
  position: relative;
  margin: 1.6rem auto 0;
  max-width: 50ch;
  color: var(--muted);
  font-size: 1.06rem;
  text-wrap: pretty;
}

.hero__actions {
  position: relative;
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  justify-content: center;
}

.btn {
  display: inline-block;
  padding: .85rem 1.9rem;
  border-radius: 2px;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.btn--solid {
  background: linear-gradient(180deg, var(--gold-lt), var(--gold));
  color: #1c1503;
}
.btn--solid:hover { background: var(--gold-pale); }

.btn--ghost {
  border-color: var(--line);
  color: var(--cream);
}
.btn--ghost:hover { border-color: var(--gold); color: var(--gold-lt); }

/* --- fleuron divider -------------------------------------------- */
/* Echoes the diamond finial and flourishes in the mark, and gives the
   page its own punctuation between sections. */

.fleuron {
  width: var(--shell);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 1.1rem;
  color: var(--gold);
}

.fleuron::before,
.fleuron::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}

.fleuron span {
  font-size: .8rem;
  letter-spacing: .5em;
  color: var(--gold-lt);
  /* The glyph carries a trailing letter-space; nudge it back to centre. */
  transform: translateX(.25em);
}

/* --- sections --------------------------------------------------- */

/* Sections carry roughly half the rhythm each, so the gap either side of a
   fleuron adds up to one step rather than two. */
.section {
  position: relative;
  z-index: 1;
  width: var(--shell);
  margin: 0 auto;
  padding: calc(var(--step) * .6) 0;
}

.section__title {
  font-size: clamp(2rem, 4.2vw, 3.2rem);
  margin-bottom: 2.8rem;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 2.1rem 1.8rem 2.2rem;
  transition: border-color .22s ease, background .22s ease;
}
.card:hover { border-color: var(--gold); background: var(--raise); }

.card__title {
  font-size: 1.75rem;
  margin-bottom: .7rem;
  color: var(--gold-pale);
}

.card p { color: var(--muted); }

/* Four products go two-up rather than four-across: auto-fit would squeeze them
   into ~265px columns at full width, which is too narrow for an icon, a name
   and two lines of copy. Pinned to two columns, the shelf stays readable. */
@media (min-width: 760px) {
  .grid--apps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Product cards carry an icon and a store link, so they run as a column with
   the link pinned to the bottom - otherwise a short blurb leaves the link
   floating mid-card and the row stops reading as a shelf. */
.card--app {
  display: flex;
  flex-direction: column;
  padding-top: 1.8rem;
}

.card__icon {
  width: 56px;
  height: 56px;
  display: block;
  margin-bottom: 1.1rem;
  border-radius: 8px;
  /* The store icons are drawn for a light tile; seat them on the navy. */
  background: var(--deep);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .35);
}

.card--app .card__title { font-size: 1.45rem; }

.card--app p { flex: 1; font-size: .97rem; }

.card__link {
  margin-top: 1.4rem;
  align-self: flex-start;
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold-lt);
  text-decoration: none;
  border-bottom: 1px solid rgba(201, 162, 39, .35);
  padding-bottom: .3rem;
  transition: color .18s ease, border-color .18s ease;
}
.card__link::after { content: " \2192"; }
.card__link:hover { color: var(--gold-pale); border-color: var(--gold); }

/* A row of short claims under a hairline rule each. Nothing here is numbered:
   they are things that are all true at once, not stages. */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 2.4rem 2rem;
}

.step { border-top: 1px solid var(--line); padding-top: 1.3rem; }

.step__title { font-size: 1.45rem; margin-bottom: .5rem; }

.step p { color: var(--muted); font-size: .98rem; }

/* --- contact ---------------------------------------------------- */

.contact {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: clamp(1.6rem, 4vw, 3rem);
}

@media (min-width: 900px) {
  .contact {
    display: grid;
    grid-template-columns: .85fr 1fr;
    gap: 3.5rem;
    align-items: start;
  }
  .contact > .notice { grid-column: 2; }
  .contact__intro { margin-bottom: 0; }
}

.contact__intro { max-width: 42ch; margin-bottom: 2.2rem; }
.contact__intro p { color: var(--muted); }
.contact__intro .section__title { margin-bottom: 1.2rem; }

.contact__alt { margin-top: 1rem; }
.contact__alt a { color: var(--gold-lt); text-underline-offset: 3px; }

.form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.3rem;
}

.field--wide, .field--captcha, .field--submit { grid-column: 1 / -1; }

.field label {
  display: block;
  margin-bottom: .5rem;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.field input,
.field textarea {
  width: 100%;
  padding: .8rem .9rem;
  background: var(--deep);
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--cream);
  font: inherit;
  font-size: 1rem;
  transition: border-color .18s ease;
}

.field input:focus,
.field textarea:focus { border-color: var(--gold); }

.field textarea { resize: vertical; }

.field--captcha input { max-width: 9rem; }

.field__error { margin-top: .45rem; font-size: .88rem; color: #f0a5a5; }

.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.notice {
  padding: 1rem 1.2rem;
  border-radius: 2px;
  font-size: .98rem;
  margin-bottom: 1.5rem;
}

.notice--ok {
  background: rgba(201, 162, 39, .09);
  border: 1px solid rgba(201, 162, 39, .4);
}

.notice--bad {
  background: rgba(240, 165, 165, .07);
  border: 1px solid rgba(240, 165, 165, .35);
}

/* --- footer ----------------------------------------------------- */

.foot {
  position: relative;
  z-index: 1;
  width: var(--shell);
  margin: 0 auto;
  padding: 2rem 0 3rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: .8rem;
  letter-spacing: .06em;
  color: var(--muted);
}

.foot__links { display: flex; gap: 1.5rem; }

.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover { color: var(--gold-lt); }

/* --- narrow ----------------------------------------------------- */

@media (max-width: 860px) {
  .form { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  :root {
    --shell: min(1120px, 100% - 2.5rem);
    --step: clamp(3.5rem, 12vw, 5rem);
  }

  .bar { padding: 1.1rem 0; }
  .bar__mark img { height: 32px; }
  .bar__word { font-size: 1.1rem; letter-spacing: .16em; }
  .bar__nav { gap: 1.1rem; font-size: .7rem; letter-spacing: .08em; }
  .bar__nav a:first-child { display: none; }

  .hero__lede { font-size: 1.01rem; }

  .hero__actions { gap: .7rem; }
  .hero__actions .btn { flex: 1 1 100%; text-align: center; }
  .btn { padding: .95rem 1.5rem; }

  .card { padding: 1.7rem 1.4rem 1.8rem; }
  .steps { gap: 1.9rem; }
}

@media (max-width: 460px) {
  :root { --shell: min(1120px, 100% - 2rem); }

  .bar__nav { display: none; }

  .hero__title { font-size: clamp(2.2rem, 11vw, 3rem); }

  .contact { padding: 1.5rem 1.25rem 1.7rem; }
  .field--captcha input { max-width: 100%; }
  .field--submit .btn { display: block; width: 100%; text-align: center; }

  .foot { flex-direction: column; align-items: flex-start; gap: .55rem; }
}

@media (hover: none) {
  .btn:hover { background: linear-gradient(180deg, var(--gold-lt), var(--gold)); }
  .btn--ghost:hover { background: transparent; }
}

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