/* Self-hosted fonts - zero external requests (no fonts.googleapis.com / fonts.gstatic.com).
   .woff2 files live in ../fonts/ - run fonts/fetch_fonts.sh once to populate them.
   font-display:swap prevents FOIT (text shows immediately in the fallback, swaps when ready). */
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/space-grotesk-500.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/space-grotesk-600.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/space-grotesk-700.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ibm-plex-sans-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ibm-plex-sans-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/ibm-plex-sans-600.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/ibm-plex-sans-700.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ibm-plex-mono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/ibm-plex-mono-500.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/ibm-plex-mono-600.woff2') format('woff2')}

:root {
  --bg:#090c10; --bg2:#06080b; --panel:#121824; --panel2:#0b0f17; --panel3:#0f141c;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);
  --ink:#f0f4f8; --ink2:#c6d0db; --muted:#8e9fae; --faint:#5d6b7a;
  --accent:#10b981; --accent-d:#059669; --accent-l:#34d399; --accent-glow:rgba(16,185,129,.16);
  --blue:#3b82f6; --blue-l:#60a5fa; --blue-glow:rgba(59,130,246,.16);
  --warn:#f59e0b;
  --row-group:#161f30;
  --font-display:'Space Grotesk','Segoe UI',system-ui,sans-serif;
  --font-body:'IBM Plex Sans','Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --maxw:1160px;
  --ease:cubic-bezier(.4,0,.2,1);
  --shadow-card:inset 0 1px 0 rgba(255,255,255,.05), 0 14px 34px -16px rgba(0,0,0,.7);
  --shadow-lift:inset 0 1px 0 rgba(255,255,255,.08), 0 26px 60px -24px rgba(0,0,0,.85);
}

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

body {
  margin:0; color:var(--ink);
  font-family:var(--font-body); font-weight:450;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  background-color:var(--bg);
  background-size:100% 100%, 100% 100%, 52px 52px, 52px 52px;
  background-attachment:fixed;
}

/* Page specific overrides */
body.index-page {
  font-size:16px; line-height:1.6;
  background-image:
    radial-gradient(900px 520px at 78% -8%, var(--blue-glow), transparent 60%),
    radial-gradient(820px 620px at 2% 102%, var(--accent-glow), transparent 55%),
    linear-gradient(rgba(255,255,255,.014) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px);
}

body.drop-ui-page {
  line-height:1.5;
  background-image:
    radial-gradient(900px 520px at 80% -10%, var(--blue-glow), transparent 60%),
    radial-gradient(760px 560px at 0% 105%, var(--accent-glow), transparent 55%),
    linear-gradient(rgba(255,255,255,.014) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px);
}

body.review-grid-page {
  font-size:13px;
  background-image:
    radial-gradient(900px 520px at 82% -12%, rgba(59,130,246,.12), transparent 60%),
    radial-gradient(700px 520px at -2% 106%, var(--accent-glow), transparent 55%),
    linear-gradient(rgba(255,255,255,.014) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.014) 1px, transparent 1px);
}

::selection { background:rgba(16,185,129,.28); color:#fff; }

/* Animations */
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(16,185,129,.5)} 70%{box-shadow:0 0 0 9px rgba(16,185,129,0)} 100%{box-shadow:0 0 0 0 rgba(16,185,129,0)} }
@keyframes sweep { 0%{transform:translateX(-130%)} 100%{transform:translateX(230%)} }
@keyframes floaty { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
@keyframes bar { 0%{width:8%} 50%{width:74%} 100%{width:96%} }

/* Review Grid specific table styling */
.review-grid-page tbody tr.data { transition:background .16s var(--ease), box-shadow .16s var(--ease); }
.review-grid-page tbody tr.data:hover td { background:rgba(59,130,246,.06)!important; }
.review-grid-page thead th, .review-grid-page tbody td, .review-grid-page tfoot td { white-space:nowrap; }

/* Media Queries */

/* Index page responsive styling */
@media (max-width:992px){ 
  .index-page [data-hero] { grid-template-columns:1fr!important; gap:40px!important; } 
  .index-page [data-split] { grid-template-columns:1fr!important; gap:36px!important; } 
}
@media (max-width:768px){ 
  .index-page [data-navlinks] { display:none!important; } 
  .index-page [data-hide-sm] { display:none!important; } 
}
@media (max-width:560px){ 
  .index-page [data-hero] { padding:64px 0 40px!important; } 
}

/* Drop UI responsive styling */
@media (max-width:768px){ 
  .drop-ui-page [data-hide-sm] { display:none!important; } 
}

/* Review Grid responsive styling */
@media (max-width:768px){
  .review-grid-page [data-hide-sm] { display:none!important; }
  .review-grid-page [data-btn-label] { display:none!important; }
}

/* ---------------------------------------------------------------------------
   Flattened interaction styles. These replace the runtime-injected
   style-hover / style-focus attributes that support.js used to compile into
   pseudo-class rules. Pure CSS now - no JS, no external requests.
   !important overrides the element's inline base style for the hovered props.
   --------------------------------------------------------------------------- */
.lnk:hover{color:var(--ink)!important}
.btn-ghost:hover{background:rgba(255,255,255,.09)!important;border-color:rgba(255,255,255,.28)!important;transform:translateY(-2px)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 16px 40px -10px rgba(16,185,129,.8)!important}
.card-h{transition:all .3s var(--ease)}
.card-h.g:hover{transform:translateY(-4px);border-color:rgba(16,185,129,.32)!important;box-shadow:0 22px 46px -22px rgba(16,185,129,.4)!important}
.card-h.b:hover{transform:translateY(-4px);border-color:rgba(59,130,246,.32)!important;box-shadow:0 22px 46px -22px rgba(59,130,246,.4)!important}
.card-h.a:hover{transform:translateY(-4px);border-color:rgba(245,158,11,.3)!important;box-shadow:0 22px 46px -22px rgba(245,158,11,.35)!important}
.fit-row:hover{border-color:rgba(16,185,129,.3)!important;transform:translateX(3px)}
.fld:focus{outline:none;border-color:var(--accent)!important;box-shadow:0 0 0 3px var(--accent-glow)!important}
.dropzone:hover{border-color:var(--blue)!important;background:linear-gradient(155deg,var(--panel),rgba(59,130,246,.07))!important;transform:translateY(-2px);box-shadow:0 22px 50px -22px rgba(59,130,246,.5)!important}
.doc-card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.18)!important;box-shadow:0 18px 40px -20px rgba(0,0,0,.8)!important}