:root {
    --alu: #E7E5E0;
    --alu-deep: #DAD7D0;
    --ink: #17171A;
    --ink-soft: #4A4A50;
    --screen: #0A0A0C;
    --screen-edge: #1C1C20;
    --teal: #0E7268;
    --paper: #F4F3EF;
    --hairline: rgba(23,23,26,.14);
    --radius: 22px;
    --font-display: "Instrument Serif", Georgia, serif;
    --font-body: "Instrument Sans", -apple-system, sans-serif;
    --font-mono: "Spline Sans Mono", "SF Mono", monospace;
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }

  body {
    background:
      radial-gradient(120% 90% at 50% 0%, #F0EEE9 0%, var(--alu) 45%, var(--alu-deep) 100%);
    color: var(--ink);
    font-family: var(--font-body);
    font-size: 17px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }

  ::selection { background: var(--teal); color: #fff; }

  .wrap { max-width: 1060px; margin: 0 auto; padding: 0 24px; }

  /* ---------- Nav ---------- */
  nav {
    display: flex; align-items: center; justify-content: space-between;
    padding: 28px 0 0;
  }
  .brand {
    font-family: var(--font-mono); font-size: 13px; letter-spacing: .08em;
    text-transform: uppercase; color: var(--ink); text-decoration: none;
  }
  .brand span { color: var(--teal); }
  .nav-links { display: flex; gap: 26px; }
  .nav-links a {
    color: var(--ink-soft); text-decoration: none; font-size: 14.5px; font-weight: 500;
  }
  .nav-links a:hover, .nav-links a:focus-visible { color: var(--ink); }
  a:focus-visible, button:focus-visible {
    outline: 2px solid var(--teal); outline-offset: 3px; border-radius: 4px;
  }

  /* ---------- Hero ---------- */
  header.hero {
    padding: 80px 0 64px;
    display: grid; grid-template-columns: 1.45fr 1fr;
    gap: 56px; align-items: center;
  }
  .portrait {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: 0 30px 60px -22px rgba(23,23,26,.5);
    border: 1px solid var(--screen-edge);
    transform: rotate(1.5deg);
  }
  .portrait img { display: block; width: 100%; height: auto; }
  .portrait-label {
    position: absolute; left: 16px; bottom: 14px;
    font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .14em;
    text-transform: uppercase; color: rgba(255,255,255,.85);
    background: rgba(10,10,12,.45); backdrop-filter: blur(6px);
    padding: 6px 12px; border-radius: 99px;
    border: 1px solid rgba(255,255,255,.15);
  }
  .kicker {
    font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--teal); margin-bottom: 22px;
  }
  h1 {
    font-family: var(--font-display); font-weight: 400;
    font-size: clamp(42px, 7vw, 76px);
    line-height: 1.04; letter-spacing: -.01em; max-width: 15ch;
  }
  h1 em { font-style: italic; color: var(--teal); }
  .hero p.lede {
    margin-top: 26px; max-width: 52ch; font-size: 18.5px; color: var(--ink-soft);
  }
  .hero-cta { margin-top: 36px; display: flex; gap: 14px; flex-wrap: wrap; }
  .btn {
    display: inline-flex; align-items: center; gap: 9px;
    font-family: var(--font-body); font-weight: 600; font-size: 15px;
    padding: 13px 22px; border-radius: 99px; text-decoration: none;
    border: 1px solid transparent; cursor: pointer; transition: transform .18s ease, background .18s ease;
  }
  .btn-solid { background: var(--ink); color: var(--paper); }
  .btn-solid:hover { background: #000; transform: translateY(-1px); }
  .btn-ghost { border-color: var(--hairline); color: var(--ink); background: transparent; }
  .btn-ghost:hover { border-color: var(--ink); }

  /* stagger on load */
  .rise { opacity: 0; transform: translateY(14px); animation: rise .7s cubic-bezier(.2,.7,.2,1) forwards; }
  .d1 { animation-delay: .05s } .d2 { animation-delay: .15s } .d3 { animation-delay: .25s } .d4 { animation-delay: .35s }
  @keyframes rise { to { opacity: 1; transform: none; } }

  /* ---------- The Screen (Cover Flow) ---------- */
  .device { padding: 8px 0 90px; }
  .screen {
    background: linear-gradient(180deg, #101014 0%, var(--screen) 30%);
    border: 1px solid var(--screen-edge);
    border-radius: var(--radius);
    box-shadow:
      0 40px 80px -30px rgba(23,23,26,.45),
      inset 0 1px 0 rgba(255,255,255,.06);
    overflow: hidden;
    position: relative;
  }
  .screen::after { /* glass glare */
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(115deg, rgba(255,255,255,.07) 0%, transparent 28%);
  }
  .screen-bar {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 22px; border-bottom: 1px solid rgba(255,255,255,.07);
    font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em;
    text-transform: uppercase; color: rgba(255,255,255,.55);
  }
  .screen-bar .counter { color: rgba(255,255,255,.85); }

  .flow-stage {
    position: relative; height: 430px;
    perspective: 1100px; perspective-origin: 50% 42%;
    touch-action: pan-y;
    user-select: none;
  }
  .cover {
    position: absolute; top: 60px; left: 50%;
    width: 250px; height: 250px; margin-left: -125px;
    transition: transform .55s cubic-bezier(.25,.8,.25,1), opacity .55s, filter .55s;
    cursor: pointer;
    will-change: transform;
  }
  .cover-inner {
    position: relative; width: 100%; height: 100%;
    border-radius: 8px; overflow: hidden;
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 20px;
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 22px 50px -12px rgba(0,0,0,.75);
  }
  /* dimming overlay for side covers (replaces filter, which breaks Safari 3D) */
  .cover-inner::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: rgba(0,0,0,var(--dim, 0)); transition: background .55s;
  }
  /* manual reflection: mirrored clone, faded with a mask. Safari-safe. */
  .cover-reflect {
    position: absolute; top: calc(100% + 6px); left: 0;
    width: 100%; height: 100%;
    border-radius: 8px; overflow: hidden;
    opacity: .3; pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), transparent 42%);
    mask-image: linear-gradient(to bottom, rgba(0,0,0,.8), transparent 42%);
  }
  .cover-reflect .flip {
    width: 100%; height: 100%; transform: scaleY(-1);
    display: flex; flex-direction: column; justify-content: space-between; padding: 20px;
  }
  .cover-reflect img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .cover.book .cover-reflect .flip { background: #101014 !important; }
  .cover.book .cover-reflect img { object-fit: contain; }
  .cover .tag {
    font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .16em;
    text-transform: uppercase; color: rgba(255,255,255,.75);
  }
  .cover .name {
    font-family: var(--font-display); font-size: 27px; line-height: 1.1; color: #fff;
    text-shadow: 0 1px 8px rgba(0,0,0,.3);
  }
  .cover .mark {
    position: absolute; right: -24px; top: -30px;
    font-family: var(--font-display); font-size: 190px; line-height: 1;
    color: rgba(255,255,255,.1); pointer-events: none;
  }

  .flow-caption {
    text-align: center; padding: 0 24px 8px; position: relative; z-index: 5;
  }
  .flow-caption .title {
    font-family: var(--font-display); font-size: 24px; color: #fff;
  }
  .flow-caption .sub {
    font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em;
    color: rgba(255,255,255,.5); margin-top: 4px;
  }
  .flow-controls {
    display: flex; justify-content: center; align-items: center; gap: 18px;
    padding: 18px 0 26px;
  }
  .flow-btn {
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14);
    color: #fff; font-size: 17px; cursor: pointer;
    transition: background .18s ease;
    display: grid; place-items: center;
  }
  .flow-btn:hover { background: rgba(255,255,255,.16); }
  .flow-open {
    font-family: var(--font-body); font-weight: 600; font-size: 14px;
    color: #0A0A0C; background: #fff; border: 0; border-radius: 99px;
    padding: 12px 22px; cursor: pointer; text-decoration: none;
    display: inline-flex; align-items: center; gap: 8px;
    transition: transform .18s ease;
  }
  .flow-open:hover { transform: translateY(-1px); }
  .hint {
    text-align: center; margin-top: 16px;
    font-family: var(--font-mono); font-size: 12px; letter-spacing: .06em;
    color: var(--ink-soft);
  }

  /* ---------- Sections ---------- */
  section { padding: 34px 0 30px; }
  .sec-head {
    display: flex; align-items: baseline; justify-content: space-between;
    border-bottom: 1px solid var(--hairline); padding-bottom: 16px; margin-bottom: 8px;
  }
  h2 { font-family: var(--font-display); font-weight: 400; font-size: 36px; letter-spacing: -.01em; }
  .sec-head .count {
    font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .1em; color: var(--ink-soft);
  }
  .rows { display: flex; flex-direction: column; }
  .row {
    display: grid; grid-template-columns: 1.1fr 1.6fr auto;
    gap: 20px; align-items: baseline;
    padding: 18px 4px; border-bottom: 1px solid var(--hairline);
    text-decoration: none; color: inherit;
    transition: background .15s ease, padding-left .2s ease;
  }
  .row:hover { background: rgba(255,255,255,.5); padding-left: 12px; }
  .row .r-name { font-weight: 600; font-size: 16.5px; }
  .row .r-desc { color: var(--ink-soft); font-size: 15.5px; }
  .row .r-go {
    font-family: var(--font-mono); font-size: 12.5px; color: var(--teal); white-space: nowrap;
  }
  .sec-note { margin-top: 20px; color: var(--ink-soft); font-size: 15.5px; max-width: 62ch; }

  /* ---------- About / honesty block ---------- */
  .about {
    margin: 70px 0; padding: 44px;
    background: var(--paper); border: 1px solid var(--hairline); border-radius: var(--radius);
  }
  .about h2 { margin-bottom: 18px; }
  .about p { color: var(--ink-soft); max-width: 64ch; margin-bottom: 14px; }
  .about p strong { color: var(--ink); font-weight: 600; }

  /* ---------- Footer ---------- */
  footer {
    margin-top: 40px; padding: 70px 0 60px;
    background: var(--ink); color: var(--paper);
  }
  footer h2 { font-size: clamp(32px, 5vw, 48px); max-width: 18ch; }
  footer p { color: rgba(244,243,239,.65); margin-top: 16px; max-width: 52ch; }
  .foot-cta { margin-top: 30px; }
  .btn-invert { background: var(--paper); color: var(--ink); }
  .btn-invert:hover { background: #fff; transform: translateY(-1px); }
  .foot-meta {
    margin-top: 64px; padding-top: 24px; border-top: 1px solid rgba(244,243,239,.14);
    display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
    font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em;
    color: rgba(244,243,239,.45); text-transform: uppercase;
  }

  /* ---------- Responsive ---------- */
  /* covers with real images */
  .cover.has-img .cover-inner { padding: 0; }
  .cover.has-img .cover-img {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; display: block;
  }
  .cover.has-img .cover-label {
    position: absolute; left: 0; right: 0; bottom: 0;
    padding: 40px 18px 16px;
    background: linear-gradient(transparent, rgba(0,0,0,.78));
    display: flex; flex-direction: column; gap: 3px;
  }
  .cover.has-img .cover-label .name { font-size: 22px; }
  .cover.has-img.clean .cover-label { display: none; }
  .cover.book .cover-inner { background: #101014 !important; }
  .cover.book .cover-img { object-fit: contain; }

  @media (max-width: 720px) {
    header.hero { grid-template-columns: 1fr; gap: 36px; padding-top: 56px; }
    .portrait { max-width: 380px; transform: rotate(0deg); }
    .nav-links a:not(.nav-cta) { display: none; }
    .flow-stage { height: 340px; perspective: 800px; }
    .cover { width: 190px; height: 190px; margin-left: -95px; top: 46px; }
    .cover-inner { padding: 16px; }
    .cover .name { font-size: 21px; }
    .row { grid-template-columns: 1fr; gap: 4px; }
    .row .r-go { margin-top: 2px; }
    .about { padding: 28px 22px; }
  }

  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
    .rise { opacity: 1; transform: none; }
  }


  /* ---------- Audit panel (the product) ---------- */
  .audit-panel {
    background: linear-gradient(180deg, #101014 0%, var(--screen) 40%);
    border: 1px solid var(--screen-edge);
    border-radius: var(--radius);
    color: var(--paper);
    padding: 56px 52px;
    margin: 26px 0 60px;
    box-shadow: 0 40px 80px -30px rgba(23,23,26,.45);
  }
  .audit-panel .kicker { color: #4FD1C5; }
  .audit-panel h2 {
    font-size: clamp(34px, 5vw, 54px); line-height: 1.06; max-width: 20ch;
  }
  .audit-panel .audit-lede {
    margin-top: 18px; color: rgba(244,243,239,.7); max-width: 58ch; font-size: 18px;
  }
  .audit-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
    margin-top: 42px; padding-top: 34px;
    border-top: 1px solid rgba(244,243,239,.14);
  }
  .audit-item h3 {
    font-family: var(--font-mono); font-size: 12.5px; letter-spacing: .14em;
    text-transform: uppercase; color: #4FD1C5; margin-bottom: 10px; font-weight: 500;
  }
  .audit-item p { color: rgba(244,243,239,.75); font-size: 15.5px; }
  .audit-cta { margin-top: 40px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
  .audit-mail {
    font-family: var(--font-mono); font-size: 13.5px; color: rgba(244,243,239,.6);
    text-decoration: none;
  }
  .audit-mail:hover { color: #fff; }
  @media (max-width: 720px) {
    .audit-panel { padding: 34px 24px; }
    .audit-grid { grid-template-columns: 1fr; gap: 22px; }
  }