/* LoveWorld Publishing — Global Inventory Intelligence: public homepage.
   Renders no data. Self-contained: no external fonts, scripts or images. */
:root{
  --navy:#1F2A44; --navy-2:#16203A; --navy-3:#0E1526;
  --gold:#B8912F; --gold-l:#E8D9AE; --gold-d:#8F6F22;
  --bg:#F4F3EF; --card:#FFFFFF; --ink:#22283A; --mut:#6E7488; --line:#E6E4DC;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg); color:var(--ink); line-height:1.6;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1140px;margin:0 auto;padding:0 24px}
a{color:inherit}

/* ---------- Buttons ---------- */
.btn{display:inline-block;font-size:14px;font-weight:700;padding:13px 26px;border-radius:9px;text-decoration:none;transition:transform .15s,background .15s,color .15s,border-color .15s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn-gold{background:var(--gold);color:#fff;box-shadow:0 6px 20px rgba(184,145,47,.34)}
.btn-gold:hover{background:#c9a03a}
.btn-line{border:1px solid rgba(232,217,174,.5);color:var(--gold-l);padding:9px 20px;font-size:13px}
.btn-line:hover{background:var(--gold-l);color:var(--navy);border-color:var(--gold-l)}
.btn-ghost{color:var(--gold-l);border:1px solid transparent}
.btn-ghost:hover{border-color:rgba(232,217,174,.35)}

/* ---------- Hero ---------- */
.hero{
  background:
    radial-gradient(1100px 620px at 78% 18%, rgba(184,145,47,.20), transparent 60%),
    radial-gradient(900px 520px at 12% 82%, rgba(90,120,190,.20), transparent 62%),
    linear-gradient(168deg, var(--navy) 0%, var(--navy-2) 55%, var(--navy-3) 100%);
  color:#fff; padding-bottom:96px; overflow:hidden;
}
.nav{max-width:1140px;margin:0 auto;padding:20px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand img{width:44px;height:44px;flex-shrink:0}
.brand span{display:flex;flex-direction:column;line-height:1.25}
.brand b{font-size:14px;letter-spacing:.6px;color:#fff}
.brand i{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--gold-l);font-style:normal}

.hero-grid{max-width:1140px;margin:0 auto;padding:44px 24px 0;display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.eyebrow{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:2.4px;text-transform:uppercase;color:var(--gold-l);border:1px solid rgba(232,217,174,.32);padding:7px 14px;border-radius:30px;margin-bottom:22px}
.hero-copy{position:relative;z-index:1}
.hero-copy h1{font-size:54px;line-height:1.08;letter-spacing:-1.2px;font-weight:800;margin-bottom:20px}
.hero-copy h1 em{font-style:normal;color:var(--gold-l)}
.lede{font-size:17px;color:#C4CCE0;max-width:560px;margin-bottom:30px}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:22px}
.access-note{font-size:12.5px;color:#8E98B4}
.access-note a{color:var(--gold-l);text-decoration:underline;text-underline-offset:3px}

/* ---------- Globe ---------- */
/* A rotating dotted sphere (canvas) with book titles travelling between points.
   Painted by js/globe.js — the cover chips below are real DOM elements it moves
   each frame via CSS variables so the artwork stays crisp. Renders no data. */
.hero-globe{display:flex;justify-content:flex-end;align-items:center}
/* Oversized on purpose: the sphere bleeds past the hero's right and bottom
   edges (hero has overflow:hidden), so only part of the globe is in view. */
.globe-live{position:relative;width:680px;max-width:none;aspect-ratio:1/1;margin:-30px -170px -230px 0;flex-shrink:0}
.globe__canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.globe__chips{position:absolute;inset:0;pointer-events:none;overflow:visible}
.globe__chip{
  position:absolute;left:0;top:0;
  display:flex;align-items:center;gap:7px;
  padding:5px 10px 5px 5px;
  background:#fff;border-radius:12px;
  box-shadow:0 10px 24px rgba(8,16,34,.30),0 1px 2px rgba(8,16,34,.16);
  transform:translate(var(--ui-x,0),var(--ui-y,0)) translate(-50%,-50%) scale(var(--ui-scale,.7));
  opacity:var(--ui-opacity,0);
  transition:transform .15s ease-out;
  will-change:transform,opacity;
}
.globe__chip img{
  width:27px;height:39px;object-fit:cover;border-radius:5px;display:block;
  box-shadow:0 1px 3px rgba(0,0,0,.28);background:#e9e6dc;
}
.globe__chip .q{font-size:12.5px;font-weight:700;color:#1F2A44;letter-spacing:.2px;white-space:nowrap}
.globe__chip .q b{color:var(--gold-d);font-weight:800}

/* ---------- Bands ---------- */
.band{padding:86px 0}
.band-alt{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.band-dark{background:linear-gradient(160deg,var(--navy) 0%,var(--navy-3) 100%);color:#fff}
.sec-title{font-size:34px;line-height:1.2;letter-spacing:-.6px;font-weight:800;color:var(--navy);margin-bottom:12px}
.sec-title.light{color:#fff}
.sec-sub{font-size:16px;color:var(--mut);max-width:640px;margin-bottom:44px}

/* Pillars */
.pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.pillar{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:26px 22px;transition:transform .18s,box-shadow .18s}
.pillar:hover{transform:translateY(-4px);box-shadow:0 16px 40px rgba(31,42,68,.10)}
.pico{font-size:26px;margin-bottom:12px}
.pillar h3{font-size:16.5px;color:var(--navy);margin-bottom:8px;font-weight:800}
.pillar p{font-size:13.5px;color:var(--mut)}

/* Capability grid */
.caps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.cap{padding:20px;border-left:2px solid var(--gold);background:var(--bg);border-radius:0 12px 12px 0}
.cap h4{font-size:14px;color:var(--navy);margin-bottom:6px;font-weight:800}
.cap p{font-size:13px;color:var(--mut)}

/* Tiers */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.tier{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:30px 26px;position:relative;overflow:hidden}
.tier::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--gold)}
.tier-mid{background:var(--navy);color:#fff;border-color:var(--navy)}
.tno{display:inline-block;font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.tier h3{font-size:18px;margin-bottom:10px;color:var(--navy);font-weight:800}
.tier-mid h3{color:#fff}
.tier p{font-size:13.5px;color:var(--mut)}
.tier-mid p{color:#B9C2D8}

/* Assurance */
.assure{text-align:left}
.alist{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-bottom:52px}
.ai{border-top:2px solid var(--gold);padding-top:16px}
.ai b{display:block;font-size:15px;margin-bottom:6px}
.ai span{font-size:13.5px;color:#AEB7CE}
.final{text-align:center;border-top:1px solid rgba(255,255,255,.12);padding-top:44px}
.final p{font-size:12.5px;color:#8E98B4;margin-top:16px}
.final a{color:var(--gold-l);text-decoration:underline;text-underline-offset:3px}

/* Footer */
.foot{background:var(--navy-3);color:#8E98B4;padding:34px 0}
.fgrid{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap}
.fbrand{display:flex;align-items:center;gap:12px}
.fseal{width:38px;height:38px}
.fbrand b{color:#fff;font-size:13.5px;display:block}
.fbrand span{font-size:11.5px}
.fnote{font-size:11.5px;max-width:420px;text-align:right}

/* ---------- Responsive ---------- */
@media(max-width:980px){
  .hero-grid{grid-template-columns:1fr;gap:24px;padding-top:28px}
  .hero-copy h1{font-size:40px}
  .hero-globe{order:-1;justify-content:center}
  /* Wider than the viewport: sides crop at the screen edges, and the lower
     part fades out under the headline instead of ending in a hard line. */
  .globe-live{width:135vw;margin:-8vw -20vw -46vw;
    -webkit-mask-image:linear-gradient(180deg,#000 58%,transparent 88%);
    mask-image:linear-gradient(180deg,#000 58%,transparent 88%)}
  .pillars,.caps{grid-template-columns:repeat(2,1fr)}
  .tiers,.alist{grid-template-columns:1fr}
  .fnote{text-align:left}
}
@media(max-width:600px){
  .hero{padding-bottom:64px}
  .hero-copy h1{font-size:31px;letter-spacing:-.6px}
  .lede{font-size:15px}
  .band{padding:58px 0}
  .sec-title{font-size:25px}
  .sec-sub{font-size:14.5px;margin-bottom:30px}
  .pillars,.caps{grid-template-columns:1fr}
  .btn{width:100%;text-align:center}
  .btn-line{width:auto}
  .nav{padding:14px 18px}
  .brand b{font-size:12px}
  .brand img{width:36px;height:36px}
}

/* Respect motion preferences — the globe holds still rather than animating. */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}