/* Micacor landing: one centred screen, gradient, hook, one start button, the sample report fanned below.
   From the Claude Design canvas "Vennado and Micacor sites", artboards
   micacor.com home and micacor.com sample report viewer. */
:root { --ink: #0F3B2E; --deep: #06201A; --brass: #C99A2E; --brass-hi: #E7BE5A; --gold-text: #F3D58A; --mist: #E2ECE6; --soft: #CFE0D7; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--deep); color: #FFF; font-family: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color: #FFF; }
a:hover { color: var(--gold-text); }
:focus-visible { outline: 3px solid var(--gold-text); outline-offset: 3px; }

.lp { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; overflow: hidden;
  background:
    radial-gradient(52% 58% at 50% 100%, rgba(201, 154, 46, .62) 0%, rgba(201, 154, 46, 0) 72%),
    radial-gradient(46% 60% at 0% 8%, rgba(42, 160, 120, .42) 0%, rgba(42, 160, 120, 0) 70%),
    radial-gradient(40% 55% at 100% 18%, rgba(42, 160, 120, .3) 0%, rgba(42, 160, 120, 0) 70%),
    linear-gradient(180deg, #06201A 0%, #0F3B2E 55%, #13513E 100%); }

.lp-top { position: relative; display: flex; justify-content: center; padding: 28px 24px 8px; }
.lp-brand { display: flex; align-items: center; gap: 13px; text-decoration: none; }
.lp-brand img { width: 44px; height: 44px; border-radius: 10px; box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }
.lp-brand .words { display: flex; flex-direction: column; gap: 4px; text-align: left; }
.lp-brand .name { font-family: "Plus Jakarta Sans", "Manrope", system-ui, sans-serif; font-weight: 800; font-size: 28px; line-height: 1; letter-spacing: -0.02em; }
.lp-brand .expand { font-size: 12px; font-weight: 500; letter-spacing: .04em; color: var(--soft); }
.lp-guides { position: absolute; right: 32px; top: 40px; font-weight: 700; font-size: 15px; text-decoration: none; }
@media (max-width: 640px) { .lp-guides { display: none; } .lp-brand .expand { font-size: 11px; letter-spacing: .02em; } }

.lp-main { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(20px, 5vh, 56px) 20px 0; }
.lp h1 { font-family: "Plus Jakarta Sans", "Manrope", system-ui, sans-serif; font-weight: 800; font-size: clamp(46px, 7.2vw, 104px); line-height: 1.02; letter-spacing: -0.028em; word-spacing: 0.06em; margin: 0 0 20px; text-wrap: balance; }
.lp-hook { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.45; margin: 0 0 30px; max-width: 34ch; color: var(--mist); text-wrap: balance; }
.lp-buy { display: inline-flex; align-items: center; gap: 14px; min-height: 64px; padding: 0 28px 0 30px; border: 0; border-radius: 999px; cursor: pointer; text-decoration: none;
  background: linear-gradient(180deg, var(--brass-hi) 0%, var(--brass) 100%); color: #0A2A21; font: 700 20px/1 "Manrope", system-ui, sans-serif;
  box-shadow: 0 16px 36px -12px rgba(201, 154, 46, .95), inset 0 1px 0 rgba(255, 255, 255, .5); }
.lp-buy:hover { filter: brightness(1.05); color: #0A2A21; }
.lp-buy .price { padding: 7px 13px; border-radius: 999px; background: rgba(10, 42, 33, .14); font-weight: 800; }
.lp-then { margin: 14px 0 0; color: var(--soft); font-size: 15px; font-weight: 500; }

/* The sample report, fanned like a hand of cards and rising from the bottom of the screen */
.lp-fan { --w: clamp(150px, 21vw, 300px); position: relative; flex: 1 0 auto; width: 100%; min-height: clamp(210px, 36vh, 400px); margin-top: clamp(44px, 6.5vh, 68px); padding: 0; border: 0; background: none; cursor: zoom-in; font: inherit; color: inherit; }
.lp-fan img { position: absolute; left: 50%; top: 22px; width: var(--w); height: auto; aspect-ratio: 1 / 1.414; margin-left: calc(var(--w) / -2); object-fit: cover; border-radius: 6px; background: #FFF;
  transform-origin: 50% 170%; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .7); }
.lp-fan .f1 { transform: rotate(-26deg); filter: brightness(.86); }
.lp-fan .f2 { transform: rotate(-13deg); filter: brightness(.93); }
.lp-fan .f3 { transform: translateY(-14px); }
.lp-fan .f4 { transform: rotate(13deg); filter: brightness(.93); }
.lp-fan .f5 { transform: rotate(26deg); filter: brightness(.86); }
.lp-fan .tag { position: absolute; left: 50%; top: 0; transform: translate(-50%, -78%); z-index: 2; white-space: nowrap; padding: 11px 18px; border-radius: 999px; background: rgba(6, 32, 26, .9); color: #FFF; font-weight: 700; font-size: 15px; box-shadow: 0 0 0 1.5px rgba(243, 213, 138, .75); }
.lp-fan:hover .tag { color: var(--gold-text); }
@media (max-width: 640px) { .lp-fan { --w: 52vw; margin-top: 40px; } .lp-fan .tag { font-size: 14px; padding: 10px 16px; } }
@media (prefers-reduced-motion: no-preference) {
  .lp-fan img { transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
  .lp-fan:hover .f1 { transform: rotate(-30deg); }
  .lp-fan:hover .f2 { transform: rotate(-15deg); }
  .lp-fan:hover .f3 { transform: translateY(-26px); }
  .lp-fan:hover .f4 { transform: rotate(15deg); }
  .lp-fan:hover .f5 { transform: rotate(30deg); }
}

.lp-foot { background: var(--deep); color: #B7CCC1; text-align: center; padding: 28px 20px 34px; font-size: 13px; line-height: 1.6; }
.lp-foot p { margin: 0 0 10px; }
.lp-foot nav { display: flex; gap: 8px 18px; flex-wrap: wrap; justify-content: center; }
.lp-foot a { color: #DCE8E1; }

/* Sample report viewer */
.viewer { border: 0; padding: 0; width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; background: rgba(4, 22, 18, .96); color: #FFF; }
.viewer::backdrop { background: rgba(4, 22, 18, .9); }
.viewer[open] { display: flex; flex-direction: column; }
.v-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; flex-wrap: wrap; }
.v-title { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.v-title strong { font-family: "Plus Jakarta Sans", "Manrope", system-ui, sans-serif; font-weight: 800; font-size: 24px; letter-spacing: -0.02em; }
.v-title span { font-size: 15px; color: var(--soft); }
.v-tools { display: flex; align-items: center; gap: 14px; }
.v-tools a { font-weight: 700; font-size: 15px; }
.v-close { width: 44px; height: 44px; border-radius: 12px; border: 1.5px solid rgba(255, 255, 255, .4); background: transparent; color: #FFF; font-size: 24px; line-height: 1; cursor: pointer; }
.v-stage { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 4px 16px; }
.v-page { height: 100%; max-height: calc(100dvh - 190px); width: auto; max-width: min(640px, calc(100vw - 150px)); aspect-ratio: 1 / 1.414; object-fit: contain; background: #FFF; border-radius: 4px; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8); }
.v-nav { flex: none; width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .14); color: #FFF; font-size: 26px; line-height: 1; cursor: pointer; }
.v-nav:hover { background: rgba(255, 255, 255, .24); }
.v-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 24px; padding: 14px 24px 22px; }
.v-dots { display: flex; gap: 8px; }
.v-dots button { width: 12px; height: 12px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: rgba(255, 255, 255, .3); }
.v-dots button[aria-current="true"] { background: var(--gold-text); }
.viewer .lp-buy { min-height: 56px; font-size: 18px; }
@media (max-width: 600px) { .v-nav { width: 40px; height: 40px; font-size: 20px; } .v-page { max-width: calc(100vw - 110px); } .v-tools a { display: none; } }