/* ============================================================
   QUICK KEY HOME SOLUTIONS — BASE
   Brand tokens, reset, and typography.
   Palette and type carried over from the approved
   "Proven Converter" mockup: Sora display / Manrope body,
   graphite neutrals with a single amber action color.
   ============================================================ */
:root{
  --white:#FFFFFF;
  --paper:#F7F9F8;
  --mist:#EDF2EF;
  --primary:#0E7D5B;
  --primary-deep:#0A5C43;
  --ink:#152420;
  --ink-deep:#083D2E;
  --ink-soft:#51625B;
  --line:#DDE5E1;
  --amber:#F59E0B;
  --amber-hi:#FBBF24;
  --amber-ink:#3B2604;
  --gold:#FCD34D;

  --r-sm:10px;
  --r-md:12px;
  --r-lg:16px;

  --pad-x:clamp(18px,4.5vw,64px);
  --measure:1240px;
}

*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:'Manrope',sans-serif;
  background:var(--white);
  color:var(--ink);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
h1,h2,h3{font-family:'Sora',sans-serif;line-height:1.18;letter-spacing:-.015em;}
img{display:block;max-width:100%;}
a{color:inherit;}
button{font-family:inherit;cursor:pointer;}

/* Signature brand mark: the "key line" — a rule with key teeth,
   used above section titles instead of pill eyebrows. */
.key-line{
  display:inline-block;width:64px;height:10px;margin-bottom:16px;
  background:
    linear-gradient(var(--amber),var(--amber)) 0 4px/40px 2px no-repeat,
    linear-gradient(var(--amber),var(--amber)) 40px 4px/2px 6px no-repeat,
    linear-gradient(var(--amber),var(--amber)) 46px 4px/2px 4px no-repeat,
    linear-gradient(var(--amber),var(--amber)) 52px 4px/2px 6px no-repeat,
    radial-gradient(circle 4px at 60px 5px,var(--amber) 3.2px,transparent 3.6px) no-repeat;
}

/* Reveal-on-scroll */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease;}
.reveal.in{opacity:1;transform:none;}

.spin{animation:qk-spin 1s linear infinite;}
@keyframes qk-spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}

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

:focus-visible{outline:3px solid var(--amber);outline-offset:2px;}