/* InventoryBase homepage — bespoke styles */

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

body {
  font-family: 'Inter', 'Proxima Nova', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
  color: #303C46;
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: 15px;
  line-height: 1.5;
  font-feature-settings: "ss01" on, "cv11" on;
}

.ib-grid {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Buttons */
.ib-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 11px 18px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  letter-spacing: -0.005em;
  transition: all 180ms cubic-bezier(0.3,0.6,0,1);
  white-space: nowrap;
}
.ib-btn-lg { padding: 14px 22px; font-size: 15px; border-radius: 12px; }
.ib-btn-primary { background: #7BC14D; color: #fff; box-shadow: 0 1px 2px rgba(48,60,70,0.10), 0 4px 12px rgba(123,193,77,0.30); }
.ib-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 2px 4px rgba(48,60,70,0.14), 0 8px 24px rgba(123,193,77,0.40); filter: brightness(0.96); }
.ib-btn-ghost { background: rgba(255,255,255,0.6); color: #303C46; border: 1px solid #D2D5DB; }
.ib-btn-ghost:hover { background: #fff; border-color: #303C46; }

/* Animations */
@keyframes inPulse { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }
@keyframes ib-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes ib-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(1.4); }
}
@keyframes ib-scan {
  0% { transform: translateY(-100%); }
  100% { transform: translateY(100%); }
}
@keyframes ib-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes mobileFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-9px); }
}
@keyframes ib-fan-out {
  from { transform: scaleX(0.42) rotate(-6deg); }
  to   { transform: scaleX(1) rotate(0deg); }
}
@keyframes ib-fan-pg1 { from { transform: rotate(0deg); opacity: 0.4; } to { transform: rotate(8deg); opacity: 1; } }
@keyframes ib-fan-pg2 { from { transform: rotate(0deg); opacity: 0.4; } to { transform: rotate(16deg); opacity: 1; } }
@keyframes ib-fan-pg3 { from { transform: rotate(0deg); opacity: 0.4; } to { transform: rotate(24deg); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  [class*="ib-fan-pg"] { animation: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  [style*="mobileFloat"] { animation: none !important; }
}

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #F4F6F8; }
::-webkit-scrollbar-thumb { background: #C8D0D7; border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: #9CA8B4; }

/* ============================================================================
   Hero report fan — ported from Claude Design "InventoryBase Report Fan.html".
   All selectors scoped under .ib-rfan (generic names like .page/.foot/.td must
   not leak site-wide). Fans out top-page-first behind the upright cover.
   ========================================================================== */
.ib-rfan { position:absolute; left:270px; top:150px; width:486px; height:687px;
  transform:scale(0.6); transform-origin:top left; z-index:4; }
.ib-rfan .page { position:absolute; left:0; top:0; width:486px; height:687px;
  background:#fff; border-radius:4px; overflow:hidden; transform-origin:50% 100%;
  box-shadow:0 2px 4px rgba(20,30,40,.10), 0 18px 40px rgba(20,30,40,.22); }
.ib-rfan .p13 { transform:rotate(20deg); z-index:10; }
.ib-rfan .p3  { transform:rotate(13deg); z-index:20; }
.ib-rfan .p2  { transform:rotate(7deg);  z-index:30; }
.ib-rfan .cover { transform:rotate(0deg); z-index:40; display:flex; flex-direction:column; }
.ib-rfan .cover .pad { height:auto; flex:1; min-height:0; }
.ib-rfan .p13 .pad,.ib-rfan .p3 .pad,.ib-rfan .p2 .pad { padding-right:22px; }
.ib-rfan .p13 .foot,.ib-rfan .p3 .foot,.ib-rfan .p2 .foot { padding-right:22px; }
.ib-rfan .pad { padding:34px 34px 0 34px; height:100%; display:flex; flex-direction:column; }
.ib-rfan .foot { margin-top:auto; border-top:1px solid #e4e7ea; padding:9px 34px;
  display:flex; justify-content:space-between; align-items:center; font-size:8.5px; color:#7b8893; }
.ib-rfan .h-sec { font-size:23px; font-weight:700; color:#243845; letter-spacing:-.01em; }
.ib-rfan .accent { width:46px; height:4px; background:#7cc04d; border-radius:2px; margin:9px 0 0; }
.ib-rfan .cv-top { display:flex; align-items:center; gap:10px; }
.ib-rfan .cv-logo { width:38px; height:38px; flex:none; }
.ib-rfan .cv-word { font-size:18px; font-weight:700; color:#1b2a36; letter-spacing:-.02em; line-height:1; }
.ib-rfan .cv-word b { color:#e8552b; font-weight:700; }
.ib-rfan .cv-word small { display:block; font-size:8.5px; font-weight:600; letter-spacing:.22em; color:#8a97a1; text-transform:uppercase; margin-top:3px; }
.ib-rfan .cv-hero { margin:26px -34px 0; height:212px; position:relative; overflow:hidden; border-top:1px solid #e4e7ea; border-bottom:1px solid #e4e7ea; }
.ib-rfan .cv-hero img { width:100%; height:100%; object-fit:cover; display:block; }
.ib-rfan .cv-kicker { margin-top:28px; font-size:11px; font-weight:600; letter-spacing:.22em; color:#3aa6c4; text-transform:uppercase; }
.ib-rfan .cv-title { font-size:42px; font-weight:700; color:#243845; line-height:1.02; letter-spacing:-.02em; margin-top:6px; }
.ib-rfan .cv-addr { margin-top:18px; font-size:15px; font-weight:600; color:#2b3744; line-height:1.45; }
.ib-rfan .cv-grid { margin-top:auto; margin-bottom:26px; display:grid; grid-template-columns:1fr 1fr; gap:14px 18px; }
.ib-rfan .cv-lab { font-size:8.5px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:#7b8893; }
.ib-rfan .cv-val { font-size:13px; font-weight:600; color:#2b3744; margin-top:2px; }
.ib-rfan .cv-foot { background:#243845; color:#cfd8de; margin:0; padding:13px 34px; display:flex; justify-content:space-between; align-items:center; font-size:10px; border-bottom:9px solid #3aa6c4; }
.ib-rfan .cv-foot b { color:#fff; font-weight:600; }
.ib-rfan .toc { margin-top:18px; }
.ib-rfan .toc-row { display:flex; align-items:flex-end; font-size:10.5px; color:#2b3744; padding:5.2px 0; }
.ib-rfan .toc-row.sub { padding-left:16px; color:#7b8893; font-size:10px; }
.ib-rfan .toc-row .t { white-space:nowrap; }
.ib-rfan .toc-row .dots { flex:1; border-bottom:1.4px dotted #c4ccd2; margin:0 6px 3px; }
.ib-rfan .toc-row .pg { font-variant-numeric:tabular-nums; color:#7b8893; }
.ib-rfan .dis h4 { font-size:13px; font-weight:700; color:#243845; margin:20px 0 7px; }
.ib-rfan .dis p { font-size:10px; line-height:1.62; color:#48555f; margin:0 0 11px; text-align:justify; }
.ib-rfan .kref { font-size:9.5px; color:#7b8893; margin-top:3px; }
.ib-rfan .tbl { margin-top:14px; border:1px solid #e4e7ea; border-radius:4px; overflow:hidden; }
.ib-rfan .tr { display:grid; grid-template-columns:1.35fr .5fr 2fr; border-bottom:1px solid #e4e7ea; }
.ib-rfan .tr:last-child { border-bottom:none; }
.ib-rfan .th { background:#f3f5f7; font-size:8px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:#7b8893; }
.ib-rfan .td { padding:8px 9px; font-size:9.5px; line-height:1.4; color:#2b3744; border-right:1px solid #e4e7ea; }
.ib-rfan .td:last-child { border-right:none; }
.ib-rfan .q { font-weight:600; color:#243845; }
.ib-rfan .ans-yes { color:#d08400; font-weight:700; }
.ib-rfan .ans-no { color:#7cc04d; font-weight:700; }
.ib-rfan .flag { display:inline-block; margin-top:5px; background:#fbe9d2; color:#b5711a; font-size:7.5px; font-weight:700; padding:2px 6px; border-radius:3px; }
.ib-rfan .photos { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:13px; }
.ib-rfan .ph { height:78px; border-radius:4px; background:repeating-linear-gradient(135deg,#eef1f3 0 12px,#e7ebee 12px 24px); border:1px solid #e4e7ea; position:relative; }
.ib-rfan .ph small { position:absolute; left:6px; bottom:5px; font-size:7px; color:#9aa4ac; font-family:ui-monospace,monospace; }
/* fan-out animation — top page (least rotated) first */
.ib-rfan .p2  { animation: ib-rfan-p2  .7s cubic-bezier(.2,.7,.2,1) 1.6s both; }
.ib-rfan .p3  { animation: ib-rfan-p3  .7s cubic-bezier(.2,.7,.2,1) 1.75s both; }
.ib-rfan .p13 { animation: ib-rfan-p13 .7s cubic-bezier(.2,.7,.2,1) 1.9s both; }
@keyframes ib-rfan-p2  { from { transform:rotate(0deg); opacity:.35; } to { transform:rotate(7deg);  opacity:1; } }
@keyframes ib-rfan-p3  { from { transform:rotate(0deg); opacity:.35; } to { transform:rotate(13deg); opacity:1; } }
@keyframes ib-rfan-p13 { from { transform:rotate(0deg); opacity:.35; } to { transform:rotate(20deg); opacity:1; } }
@media (prefers-reduced-motion: reduce) { .ib-rfan .p2,.ib-rfan .p3,.ib-rfan .p13 { animation:none !important; } }