/* THERE'S A BIM TOOL FOR THAT — AfonsoBIM Tech Minimalist
   Visual-only stylesheet. Load AFTER the prototype's original <style>.
   No HTML structure, icon or JavaScript changes required.
*/
:root {
  color-scheme: dark;
  --bg: #0B0B0D;
  --bg-deep: #070708;
  --panel: #151518;
  --panel-2: #202024;
  --line: #343439;
  --line-soft: #242428;
  --text: #F6F6F7;
  --text-dim: #AAAAB1;
  --text-faint: #797982;
  --amber: #F28C28;
  --amber-dim: #BE6414;
  --green: #78D7A0;
  --red: #F08F8F;
  --radius: 8px;
  --focus-ring: 0 0 0 3px rgba(242,140,40,.22);
}
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  background-image:
    radial-gradient(ellipse 72% 40% at 50% -18%, rgba(242,140,40,.095), transparent 80%),
    linear-gradient(rgba(255,255,255,.017) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.017) 1px, transparent 1px);
  background-size: auto, 64px 64px, 64px 64px;
  color: var(--text);
}
#app { max-width: 1200px; padding: 0 32px 64px; }
header.topbar { padding: 23px 0; margin-bottom: 0; border-color: var(--line-soft); }
.brand { gap: 12px; }
.brand-mark { width: 29px; height: 29px; border: 1.5px solid var(--amber); border-radius: 7px; transform: rotate(-8deg); }
.brand-mark::before { left: 13px; top: 7px; }
.brand-mark::after { left: 7px; top: 13px; }
.brand-name { font-size: 15px; letter-spacing: -.025em; }
.brand-name .dim { color: #A1A1AA; }
nav.topnav { gap: 30px; font-size: 13px; }
nav.topnav span { padding: 5px 0; transition: color .15s ease; }
nav.topnav span:hover, nav.topnav span.active { color: var(--text); border-bottom-color: var(--amber); }
.landing-hero { padding: 110px 0 8px; }
.eyebrow-note {
  display: inline-block; border: 1px solid #38302A; background: rgba(242,140,40,.07);
  color: #E7A05A; font-size: 11.5px; padding: 7px 12px; border-radius: 100px;
  letter-spacing: .035em; margin-bottom: 25px;
}
.landing-hero h1 { font-size: clamp(38px, 5vw, 60px); line-height: 1.08; max-width: 760px; margin-bottom: 40px; letter-spacing: -.055em; font-weight: 600; }
.search-shell { max-width: 760px; }
.search-box {
  background: #19191D; border-color: #3B3B42; border-radius: 12px;
  padding: 7px 7px 7px 22px; gap: 12px;
  box-shadow: 0 12px 45px rgba(0,0,0,.16);
  transition: border-color .18s ease, box-shadow .18s ease;
}
.search-box.focused, .search-box:focus-within { border-color: var(--amber); box-shadow: var(--focus-ring), 0 12px 45px rgba(0,0,0,.20); }
.search-box input { font-size: 15px; padding: 15px 0; min-width: 0; }
.search-box input::placeholder { color: #85858F; }
.search-btn, .btn-primary, .compare-bar button {
  background: var(--amber); color: #17120E; border-radius: 7px; font-weight: 600;
  transition: background .15s ease, transform .15s ease;
}
.search-btn { padding: 14px 21px; white-space: nowrap; }
.search-btn:hover, .btn-primary:hover, .compare-bar button:hover { background: #FFAA4B; transform: translateY(-1px); }
.search-btn:active, .btn-primary:active, .compare-bar button:active { transform: translateY(0); }
.example-row { margin-top: 20px; gap: 9px; }
.example-chip {
  border-color: #323238; color: #B7B7BD; background: #17171A; border-radius: 7px;
  padding: 9px 12px; transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.example-chip:hover { border-color: var(--amber); color: #FFF; background: rgba(242,140,40,.075); }
.landing-stats { margin-top: 82px; padding-top: 27px; gap: 68px; }
.landing-stats .num { font-size: 23px; font-weight: 600; }
.landing-stats .lbl { color: #8D8D96; font-size: 11px; }
.tick-panel { background: #17171B; border-color: #33333A; border-radius: 10px; overflow: hidden; }
/* Preserve the existing decorative corner-tick motif; make it subtler. */
.tick-panel::before, .tick-panel::after { opacity: .48; width: 10px; height: 10px; }
.results-header { padding: 38px 0 23px; }
.results-header .q-text { font-size: 25px; letter-spacing: -.035em; }
.results-layout { grid-template-columns: 210px minmax(0,1fr); gap: 36px; margin-top: 30px; }
.filters h4 { color: #EEE; font-size: 13px; }
.filter-group { margin-bottom: 26px; }
.filter-opt { padding: 7px 0; }
.filter-opt input { accent-color: var(--amber); }
.filter-reset { font-weight: 600; }
.result-count { margin-bottom: 16px; }
.tool-card { padding: 22px 24px; margin-bottom: 13px; transition: border-color .16s ease, background .16s ease; }
.tool-card:hover, .related-item:hover { background: #1B1B20; border-color: #9B642F; }
.tool-card .tname { font-size: 18px; font-weight: 600; letter-spacing: -.03em; }
.tool-card .top-row { margin-bottom: 9px; }
.why { font-size: 13px; line-height: 1.65; color: #B4B4BD; }
.matched-tags { margin-top: 12px; }
.match-score .pct { font-size: 23px; font-weight: 600; }
.card-actions { margin-top: 16px; }
.card-actions button { color: #A7A7B0; }
.badge { border-radius: 5px; padding: 3px 8px; font-weight: 500; }
.badge.best { background: rgba(242,140,40,.10); }
.badge.free { background: rgba(120,215,160,.07); }
.badge.oss { background: rgba(111,168,220,.07); }
.compare-bar { background: rgba(13,13,15,.97); backdrop-filter: blur(12px); padding: 15px 32px; }
.compare-bar button { padding: 11px 17px; }
.detail-head { padding-top: 36px; }
.detail-head h2 { font-size: 34px; letter-spacing: -.04em; }
.detail-grid { gap: 16px; }
.attr-block { padding: 19px 21px; }
.attr-block h4 { text-transform: uppercase; letter-spacing: .08em; }
.chip { background: #25252B; border-color: #414149; border-radius: 5px; }
.evidence-box { background: #1C1A18; border-left-color: var(--amber); border-radius: 0 8px 8px 0; }
.btn-primary, .btn-ghost { border-radius: 7px; }
.btn-ghost { background: #1A1A1F; border-color: #424249; color: #F4F4F6; }
.btn-ghost:hover { border-color: var(--amber); }
.related-item { padding: 15px 18px; }
.compare-head { padding-top: 38px; }
table.compare-table th, table.compare-table td { padding: 15px 17px; }
table.compare-table th { color: #A4A4AD; }
.vendors-hero { padding-top: 88px; }
.vendors-hero h1 { font-size: 38px; letter-spacing: -.045em; }
.vendors-grid { gap: 18px; }
.vendor-card { padding: 26px 23px; }
.vendor-card h4 { font-size: 16px; }
.vendors-cta input { background: #19191D; border-color: #3B3B42; border-radius: 7px; min-width: 0; }
.vendors-cta input:focus { outline: none; border-color: var(--amber); box-shadow: var(--focus-ring); }
footer { margin-top: 90px; }
button:focus-visible, a:focus-visible, nav.topnav span:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
@media (max-width: 760px) {
  #app { padding: 0 18px 90px; }
  header.topbar { gap: 16px; align-items: flex-start; flex-wrap: wrap; }
  nav.topnav { gap: 17px; flex-wrap: wrap; font-size: 12px; }
  .landing-hero { padding-top: 75px; }
  .landing-hero h1 { font-size: clamp(34px, 9vw, 48px); margin-bottom: 32px; }
  .landing-stats { gap: 28px; margin-top: 58px; }
  .results-layout { grid-template-columns: 1fr; gap: 15px; }
  .tool-card { grid-template-columns: minmax(0,1fr) 65px; gap: 10px; padding: 18px; }
  .vendors-hero { padding-top: 55px; }
  .vendors-hero h1 { font-size: 30px; }
  .vendors-grid, .detail-grid { grid-template-columns: 1fr; }
  .compare-bar { padding: 12px 18px; gap: 12px; }
  .compare-bar .names { max-width: 60%; line-height: 1.5; }
}
@media (max-width: 450px) {
  .search-box { padding-left: 12px; gap: 5px; }
  .search-box input { font-size: 13px; }
  .search-btn { padding: 13px 11px; font-size: 12px; }
  .landing-stats { gap: 18px; }
  .landing-stats .num { font-size: 20px; }
  .vendors-cta form { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}