:root {
  --bg: #0a0907;
  --surface: #12100c;
  --cream: #f1d7aa;
  --text: #fffaf0;
  --muted: #d6cec1;
  --line: rgba(255,255,255,.14);
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  margin: 0;
  font-family: "Roboto", sans-serif;
  color: var(--text);
  background: radial-gradient(circle at 76% 8%, #2b251a 0, #0b0b08 34%, #050504 100%);
}
a { color: inherit; text-decoration: none; }

.shell {
  min-height: 100svh;
  /* padding: 18px; */
  display: grid;
  justify-items: center;
  align-items: start;
}

.landing-card {
  /* width: min(1480px, 100%); */
  width: 100%;
  min-height: calc(100svh - 36px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: #090907;
  box-shadow: 0 22px 65px rgba(0,0,0,.42);
  position: relative;
}

.brand-row {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 10;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 26px 34px;
  pointer-events: none;
}
.brand, .brand-row .app-store { pointer-events: auto; }
.brand { display:flex; gap:10px; align-items:center; }
.brand-mark {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;

  display: grid;
  place-items: center;

  border: 1px solid rgba(234, 209, 167, 0.38);
  border-radius: 8px;
  background: rgba(9, 9, 7, 0.36);
  backdrop-filter: blur(10px);

  overflow: hidden;
}

.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.brand strong { display:block; font-size:25px; font-weight:700; line-height:.95; }
.brand small { display:block; margin-top:4px; text-transform:uppercase; letter-spacing:.18em; font-size:8px; color:var(--cream); }

.hero {
  min-height: 760px;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.hero-visual {
  position:absolute;
  inset:0;
  overflow:hidden;
  z-index:0;
}
.hero-slides,.hero-slide { position:absolute; inset:0; width:100%; height:100%; }
.hero-slide {
  object-fit:cover;
  object-position:58% 48%;
  opacity:0;
  transform:scale(1.12);
  transition:opacity 1.2s ease;
}
.hero-slide.is-active { opacity:1; }
.hero-vignette {
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,
      #090907 0%,
      #090907 27%,
      rgba(9,9,7,.98) 31%,
      rgba(9,9,7,.88) 38%,
      rgba(9,9,7,.52) 46%,
      rgba(9,9,7,.08) 61%,
      transparent 72%),
    linear-gradient(0deg,
      #090907 0%,
      rgba(9,9,7,.96) 4%,
      rgba(9,9,7,.72) 11%,
      rgba(9,9,7,.24) 21%,
      transparent 38%);
}
.hero::after {
  content:"";
  position:absolute;
  z-index:1;
  inset:auto 0 0;
  height:230px;
  pointer-events:none;
  background:linear-gradient(to bottom, transparent 0%, rgba(9,9,7,.38) 35%, #090907 100%);
}

.hero-copy {
  position:relative;
  z-index:4;
  width:min(38%, 510px);
  padding:145px 0 245px 72px;
}
.eyebrow {
  color:var(--cream);
  text-transform:uppercase;
  letter-spacing:.11em;
  font-weight:600;
  font-size:11px;
  margin:0 0 13px;
}
h1,h2 { font-family:"Roboto", sans-serif; font-weight:700; }
h1 {
  font-size:clamp(38px, 4.5vw, 60px);
  line-height:.98;
  margin:0;
  letter-spacing:-.035em;
  color: white;
}
h1 em { color:var(--cream); font-style:normal; }
.lead {
  max-width:470px;
  color:var(--muted);
  font-size:17px;
  line-height:1.55;
  margin:24px 0 26px;
}

.app-store {
  display:inline-flex;
  align-items:center;
  gap:10px;
  background-color:white;
  color:#111;
  padding:11px 18px;
  border-radius:8px;
  font-weight:600;
  transition:.2s ease;
}
.app-store:hover { transform:translateY(-2px); filter:brightness(1.04); }
.app-store-icon { font-size:24px; }
.app-store small,.app-store strong { display:block; line-height:1.03; }
.app-store small { font-size:8px; font-weight:500; }
.app-store strong { font-size:17px; }
.app-store--small {
  background:#050504;
  color:#fff;
  border:1px solid rgba(255,255,255,.16);
  border-radius:8px;
  padding:10px 15px;
}
.app-store--small > i { font-size:15px; }

.trust {
  display:flex;
  flex-wrap:wrap;
  gap:26px;
  padding:0;
  margin:28px 0 0;
  list-style:none;
  color:#d9d3c7;
  font-size:12px;
}
.trust li { display:flex; align-items:center; gap:7px; }
.trust i { color:var(--cream); font-size:14px; width:17px; text-align:center; }

blockquote {
  position:absolute;
  right:38px;
  bottom:230px;
  margin:0;
  width:300px;
  text-align:right;
  color:#fff;
  z-index:3;
  text-shadow:0 2px 14px rgba(0,0,0,.62);
}
blockquote span { display:block; font-size:18px; font-weight:600; line-height:1.25; }
blockquote small { display:block; margin-top:7px; font-size:12px; color:rgba(255,255,255,.78); }

.today-card {
  margin:-198px 64px 0;
  min-height:152px;
  display:grid;
  grid-template-columns:220px 1fr auto;
  align-items:center;
  gap:26px;
  padding:14px 20px 14px 14px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius:10px;
  background:
    linear-gradient(
      130deg,
      rgba(255,255,255,.075),
      rgba(255,255,255,.025)
    );
  box-shadow:0 18px 45px rgba(0,0,0,.22);
  backdrop-filter: blur(14px);
  position:relative;
  z-index:6;
}
.today-image-wrap { height:124px; overflow:hidden; border-radius:8px; }
.today-image-wrap img { width:100%; height:100%; object-fit:cover; }
.today-copy h2 { font-size:40px; line-height:1; margin:2px 0 8px; letter-spacing:-.025em; }
.today-copy > p:not(.eyebrow) { color:#dfd9cf; margin:0 0 11px; max-width:90%; font-size:14px; line-height:1.45; }
.tags { display:flex; flex-wrap:wrap; gap:7px; }
.tags span { border:1px solid rgba(234,209,167,.2); background:rgba(234,209,167,.07); padding:5px 10px; border-radius:999px; color:#e8decc; font-size:11px; }
.today-arrow { width:52px; aspect-ratio:1; border-radius:8px; background:var(--cream); color:#111; display:grid; place-items:center; font-size:22px; transition:.2s ease; }
.today-arrow:hover { transform:translateX(4px); }

.footer {
  margin:18px 64px 0;
  padding:14px 0 24px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:20px;
  color:#9d998f;
  font-size:11px;
}
.footer-links,.social-links { display:flex; gap:16px; }
.footer-links { justify-content:center; }
.footer a:hover { color:#fff; }
.social-links { justify-content:flex-start; }
.social-links a { width:26px; aspect-ratio:1; display:grid; place-items:center; border:0px solid var(--line); border-radius:6px; }
.footer p { text-align:right; margin:0; }

@media (max-width: 980px) {
  .brand-row { padding:22px 24px; }
  .hero { min-height:720px; }
  .hero-copy { width:46%; padding:132px 0 245px 42px; }
  h1 { font-size:clamp(46px, 6vw, 62px); }
  .hero-vignette {
    background:
      linear-gradient(90deg,#090907 0%,#090907 31%,rgba(9,9,7,.92) 40%,rgba(9,9,7,.42) 54%,transparent 72%),
      linear-gradient(0deg,#090907 0%,rgba(9,9,7,.72) 14%,transparent 38%);
  }
  blockquote { bottom:215px; }
  .today-card { margin:-185px 28px 0; grid-template-columns:170px 1fr auto; gap:20px; }
  .today-image-wrap { height:112px; }
  .footer { margin-inline:28px; padding-bottom:24px; }
}

@media (max-width: 760px) {
  .brand-row { position:relative; background:#090907; }
  .hero { min-height:auto; display:flex; flex-direction:column; }
  .hero-visual { position:relative; height:49svh; min-height:350px; order:1; }
  .hero-slide { transform:scale(1.04); object-position:center 45%; }
  .hero-vignette { background:linear-gradient(0deg,#090907 0%,rgba(9,9,7,.45) 27%,transparent 58%); }
  .hero::after { display:none; }
  .hero-copy { order:2; width:100%; padding:34px 24px 42px; }
  h1 { font-size:clamp(48px, 13vw, 64px); }
  .lead { font-size:16px; }
  blockquote { right:22px; bottom:22px; width:250px; }
  .today-card { margin:0 18px; grid-template-columns:106px 1fr auto; min-height:126px; padding:12px; gap:14px; }
  .today-image-wrap { height:100px; }
  .today-copy h2 { font-size:32px; }
  .today-copy > p:not(.eyebrow), .tags { display:none; }
  .today-arrow { width:44px; font-size:18px; }
  .footer { grid-template-columns:1fr; text-align:center; margin-inline:18px; padding-top:18px; }
  .footer-links,.social-links { justify-content:center; }
  .footer p { text-align:center; }
}

@media (max-width: 520px) {
  .shell { padding:0px; }
  .landing-card { min-height:calc(100svh - 30px); }
  .brand-row { padding:17px; }
  .brand strong { font-size:23px; }
  .brand-mark { width:34px; }
  .app-store--small { font-size:11px; padding:9px 11px; }
  .hero-visual { height:43svh; min-height:320px; }
  blockquote { right:16px; bottom:16px; width:220px; }
  blockquote span { font-size:16px; }
  blockquote small { font-size:11px; }
  .hero-copy { padding:28px 18px 32px; }
  .trust { gap:14px; font-size:11px; }
  .today-card { grid-template-columns:80px 1fr 38px; gap:10px; border-radius:8px; }
  .today-image-wrap { height:82px; border-radius:7px; }
  .today-copy .eyebrow { font-size:9px; margin-bottom:4px; }
  .today-copy h2 { font-size:27px; margin:0; }
  .today-arrow { width:38px; border-radius:7px; }
}

.legal { width:min(760px, calc(100% - 40px)); margin:80px auto; padding:40px; border:1px solid var(--line); border-radius:10px; background:#11110d; }
.legal h1 { font-size:54px; }
.legal p { color:var(--muted); line-height:1.7; }
.legal a { color:var(--cream); }