/* damga.qa — the landing page, in the Clay + Glass register.
 *
 * WHY THIS LOOKS NOTHING LIKE THE FIRST VERSION. The first build used the flat
 * plum surface from the consumer app: dark ground, 1px hairlines, quiet cards.
 * That is the wrong register. `Damga Clay + Glass.dc.html` splits the brand in
 * two -- "personality where it converts, calm where it retains" -- and puts
 * MARKETING HERO SURFACES on the clay side, with the dashboard on the calm one.
 * Its closing line sends the marketing site to the earlier exploration:
 * "It is the right answer for the card and the marketing site."
 *
 * So the recipe here is taken from `Damga Clay + Glass v1.dc.html` rather than
 * approximated:
 *
 *   the ground   a spectrum, 152deg, plum -> wine -> seal -> flame -> ochre
 *   clay         coloured all the way through, radius 26px, and THREE shadows
 *                mixed from the surface's OWN hue -- outer cast, inset shade
 *                lower-right, inset highlight upper-left. No neutral grey.
 *   glass        overlays only, translucent, tinted toward cream, blurred --
 *                and it only reads properly against a saturated ground, which
 *                is the reason glassmorphism never worked on off-white.
 *
 * A CSS file rather than a <style> block, because the site's CSP is
 * style-src 'self' and inline styles fail silently to an unstyled page.
 */

:root {
  --plum: #3b0f22;
  --plum-deep: #1c040c;
  --wine: #7a1428;
  --seal: #c4271b;
  --flame: #e0662a;
  --ochre: #edaa3c;
  --teal: #0f6a6c;
  --cream: #fdf4e6;
  --cream-lit: #fff6e6;

  --ink: var(--cream);
  --muted: rgba(253, 244, 230, 0.80);
  --faint: rgba(253, 244, 230, 0.60);

  --wrap: 70rem;
  --gutter: clamp(1.15rem, 5vw, 3.5rem);
  --radius: 26px;

  --t-h1: clamp(2.1rem, 7vw, 4.2rem);
  --t-h2: clamp(1.65rem, 4.6vw, 2.8rem);
  --t-h3: clamp(1.05rem, 2.2vw, 1.32rem);
  --t-lede: clamp(1rem, 2vw, 1.22rem);
  --t-body: clamp(0.95rem, 1.6vw, 1.04rem);
  --t-label: clamp(0.64rem, 1.15vw, 0.71rem);

  --mono: ui-monospace, SFMono-Regular, Menlo, "Roboto Mono", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { overflow-x: clip; }

/* THE GROUND IS THE BRAND. The ramp runs down the whole page rather than
   sitting behind one hero, which is what makes the glass above it read. */
body {
  margin: 0;
  color: var(--ink);
  font: 400 var(--t-body)/1.62 var(--sans);
  background: #2c0a1b;
  background-image:
    radial-gradient(circle at 82% 6%, rgba(237, 170, 60, 0.30), rgba(237, 170, 60, 0) 46%),
    linear-gradient(152deg, #2c0a1b 0%, #5e1226 28%, #a5201c 58%, #dd6127 82%, #edaa3c 100%);
  /* NOT background-attachment: fixed. That pins the ramp to the VIEWPORT, so
     it repaints plum-to-ochre in every screenful and the page below the hero
     is uniformly dark -- which is the opposite of the direction, where the
     spectrum runs down the whole document and the foot lands on ochre. It also
     made the footer's dark text sit on a dark ground and vanish. */
  background-size: 100% 100%;
  background-repeat: no-repeat;
  min-height: 100vh;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

/* --- clay ------------------------------------------------------------------
 * One rule per hue. Every shadow is mixed from the surface's own colour, so a
 * slab casts its own light rather than a hand-picked grey. */
.clay { border-radius: var(--radius); border: 0; }

.clay,
.clay[data-hue="wine"] { --h: var(--wine); }
.clay[data-hue="seal"]  { --h: var(--seal); }
.clay[data-hue="flame"] { --h: var(--flame); }
.clay[data-hue="ochre"] { --h: var(--ochre); }
.clay[data-hue="teal"]  { --h: var(--teal); }
.clay[data-hue="plum"]  { --h: var(--plum); }

.clay {
  background: var(--h);
  background-image: linear-gradient(
    155deg,
    color-mix(in oklch, var(--h) 82%, var(--cream-lit)),
    var(--h) 60%,
    color-mix(in oklch, var(--h) 78%, var(--plum-deep))
  );
  box-shadow:
    0 22px 42px -20px color-mix(in oklch, var(--h) 55%, var(--plum-deep)),
    inset -6px -6px 13px color-mix(in oklch, var(--h) 62%, var(--plum-deep)),
    inset 6px 6px 13px color-mix(in oklch, var(--h) 58%, var(--cream-lit));
}
.clay[data-hue="ochre"] { color: var(--plum); }
.clay[data-hue="ochre"] .muted,
.clay[data-hue="ochre"] p { color: rgba(44, 10, 27, 0.78); }

/* --- glass: overlays only, never a scrolling surface ----------------------- */
.glass {
  background: linear-gradient(135deg, rgba(253, 244, 230, 0.20), rgba(253, 244, 230, 0.07));
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(253, 244, 230, 0.22);
  box-shadow: 0 20px 40px -20px rgba(44, 10, 27, 0.7), inset 0 1px 0 rgba(253, 244, 230, 0.45);
}

/* --- reveal: transform only, never opacity --------------------------------
 * The first version faded in, and the gate failed it: nine elements sat at
 * opacity 0 waiting to be scrolled into view. That is invisible to a fast
 * scroll, a screenshot and a link preview. Nothing here is hidden pending an
 * event; the motion is movement only. */
.reveal { opacity: 1; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal { animation: reveal linear both; animation-timeline: view(); animation-range: entry 12% cover 34%; }
  }
}
@keyframes reveal { from { transform: translateY(18px); } to { transform: none; } }

/* --- chrome ---------------------------------------------------------------- */
.bar {
  position: sticky; top: clamp(0.5rem, 2vw, 1rem); z-index: 20;
  width: min(var(--wrap), calc(100% - 2 * var(--gutter)));
  margin: clamp(0.5rem, 2vw, 1rem) auto 0;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 0.65rem 0.7rem 0.65rem 1rem;
  border-radius: 999px;
}
.mark { display: inline-flex; align-items: center; gap: 0.55rem; font-weight: 700; font-size: 1.05rem; letter-spacing: -0.01em; text-decoration: none; }
.mark span[aria-hidden] {
  width: 1.55rem; height: 1.55rem; border-radius: 50%;
  background-image: linear-gradient(155deg, #f6c56a, var(--ochre) 55%, #dd8f2a);
  box-shadow: inset 2px 2px 4px rgba(255, 246, 230, 0.6), inset -2px -2px 4px rgba(160, 90, 16, 0.5);
  color: var(--plum); display: grid; place-items: center; font-size: 0.95rem; font-weight: 800;
}
.bar-cta {
  font-weight: 600; font-size: 0.88rem; text-decoration: none; white-space: nowrap;
  padding: 0.6rem 1.1rem; border-radius: 999px; color: var(--plum);
  background-image: linear-gradient(160deg, #f6c56a, var(--ochre) 55%, #dd8f2a);
  box-shadow: 0 6px 14px -4px rgba(196, 39, 27, 0.7), inset 0 -2px 4px rgba(59, 15, 34, 0.4), inset 0 2px 3px rgba(253, 244, 230, 0.6);
}

.eyebrow {
  font: 600 var(--t-label)/1 var(--mono);
  letter-spacing: 0.16em; text-transform: uppercase; color: rgba(253, 244, 230, 0.72);
  margin: 0 0 0.9rem;
}
h1 { font-size: var(--t-h1); line-height: 1.03; letter-spacing: -0.04em; font-weight: 600; margin: 0 0 0.75rem; text-wrap: balance; }
h2 { font-size: var(--t-h2); line-height: 1.07; letter-spacing: -0.032em; font-weight: 600; margin: 0 0 0.7rem; text-wrap: balance; }
h3 { font-size: var(--t-h3); line-height: 1.26; font-weight: 600; margin: 0 0 0.45rem; }
p { margin: 0 0 0.9rem; }
.lede { font-size: var(--t-lede); color: var(--muted); max-width: 46ch; }
.fine { font-size: 0.85rem; color: var(--faint); }
.meta { font: 500 0.74rem/1.45 var(--mono); letter-spacing: 0.05em; color: rgba(253, 244, 230, 0.62); margin: 0.7rem 0 0; }

/* --- hero ------------------------------------------------------------------ */
.hero {
  display: grid; gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
  align-items: center; max-width: var(--wrap); margin: 0 auto;
  padding: clamp(2.6rem, 7vw, 5rem) var(--gutter) clamp(2rem, 5vw, 3.5rem);
}
.hero-shot img {
  border-radius: 30px; max-width: min(100%, 19rem); margin-inline: auto;
  box-shadow: 0 40px 76px -26px rgba(20, 4, 12, 0.9), inset 0 1px 0 rgba(253, 244, 230, 0.42);
}
.cta { display: flex; flex-wrap: wrap; gap: 0.7rem; margin: 1.5rem 0 1rem; }
.cta a, .start-cta .primary {
  text-decoration: none; text-align: center; font-weight: 600; font-size: 1rem;
  padding: 0.9rem 1.5rem; border-radius: 999px;
}
.primary {
  color: var(--plum);
  background-image: linear-gradient(160deg, #f6c56a, var(--ochre) 55%, #dd8f2a);
  box-shadow: 0 8px 18px -5px rgba(196, 39, 27, 0.75), inset 0 -2px 5px rgba(59, 15, 34, 0.45), inset 0 2px 4px rgba(253, 244, 230, 0.6);
}
.secondary {
  color: var(--cream);
  background: linear-gradient(135deg, rgba(253, 244, 230, 0.18), rgba(253, 244, 230, 0.06));
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(253, 244, 230, 0.24);
}

/* --- ticker ---------------------------------------------------------------- */
.ticker { overflow: hidden; padding: 0.8rem 0; background: rgba(28, 4, 12, 0.28); border-block: 1px solid rgba(253, 244, 230, 0.14); }
.ticker-run {
  display: flex; gap: 1.7rem; width: max-content;
  font: 500 0.8rem/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(253, 244, 230, 0.7); animation: slide 46s linear infinite;
}
.ticker-run span:nth-child(even) { color: var(--ochre); }
@keyframes slide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-run { animation: none; } }

/* --- bands ----------------------------------------------------------------- */
.band { max-width: var(--wrap); margin: 0 auto; padding: clamp(2.8rem, 7vw, 5rem) var(--gutter); }
.band.alt > * { max-width: var(--wrap); margin-inline: auto; }

.steps { list-style: none; margin: 2.1rem 0 0; padding: 0; display: grid; gap: 1.1rem;
         grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.steps.compact { margin-top: 0; grid-template-columns: 1fr; }
.step, .card, .tile { padding: clamp(1.2rem, 2.6vw, 1.7rem); }
.step .n, .tile .n { display: inline-block; font: 700 0.72rem/1 var(--mono); letter-spacing: 0.12em; opacity: 0.8; margin-bottom: 0.75rem; }
.step p, .tile p, .card p { color: rgba(253, 244, 230, 0.84); margin: 0; }

.grid { display: grid; gap: 1.1rem; margin-top: 2.1rem; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grid.four { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }

.rows { list-style: none; margin: 0; padding: 0; }
.rows li { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: 0.62rem 0; border-bottom: 1px solid rgba(253, 244, 230, 0.16); }
.rows li:last-child { border-bottom: 0; }
.rows span { color: rgba(253, 244, 230, 0.66); font-size: 0.87rem; }
.rows b { font-weight: 600; text-align: end; }
.clay[data-hue="ochre"] .rows li { border-bottom-color: rgba(44, 10, 27, 0.18); }
.clay[data-hue="ochre"] .rows span { color: rgba(44, 10, 27, 0.66); }

/* --- frames ---------------------------------------------------------------- */
.frames { display: grid; gap: clamp(1.3rem, 4vw, 2.6rem); margin-top: 2.1rem; align-items: center;
          grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.frame { margin: 0; }
.frame img { border-radius: 28px; max-width: min(100%, 17rem); margin-inline: auto;
             box-shadow: 0 30px 56px -24px rgba(20, 4, 12, 0.85), inset 0 1px 0 rgba(253, 244, 230, 0.3); }
.frame figcaption { margin-top: 0.9rem; font: 500 0.76rem/1.4 var(--mono); letter-spacing: 0.05em; color: rgba(253, 244, 230, 0.66); text-align: center; }
.frame-note { padding: clamp(1.2rem, 2.6vw, 1.8rem); }
.frame-note h3 { font-size: var(--t-h3); line-height: 1.3; margin-bottom: 0.75rem; }
.frame-note p { color: rgba(253, 244, 230, 0.84); margin: 0; }

/* --- start ----------------------------------------------------------------- */
.start-grid { display: grid; gap: 1.2rem; margin-top: 2.1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.start-cta { padding: clamp(1.3rem, 3vw, 1.9rem); align-self: start; }
.start-cta .primary { display: block; margin: 1.1rem 0 0.85rem; }
.start-cta p { color: rgba(253, 244, 230, 0.84); }

/* --- foot ------------------------------------------------------------------ */
.foot { max-width: var(--wrap); margin: 0 auto; padding: clamp(2rem, 5vw, 3rem) var(--gutter) clamp(2.5rem, 6vw, 4rem); color: rgba(44, 10, 27, 0.72); font-size: 0.9rem; }
.foot .mark { margin-bottom: 0.85rem; color: var(--plum); }
.foot p { margin: 0 0 0.35rem; }

a:focus-visible { outline: 2px solid var(--cream); outline-offset: 3px; border-radius: 0.4rem; }