/* ============================================================
   BIM ANALYTICS — Base styles + component classes
   Ported 1:1 from the production site (Pagina Web/css/style.css)
   so React components and consumer pages render pixel-identical.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  margin: 0;
}

h1, h2, h3 { font-family: var(--font-head); line-height: var(--lh-heading); font-weight: 700; letter-spacing: var(--ls-heading); margin: 0; }
a { color: inherit; text-decoration: none; }
img, canvas { display: block; max-width: 100%; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--pad-inline); }

/* Gradient text — the brand's signature emphasis */
.grad {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ============ Buttons ============ */
.btn {
  display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-head);
  font-weight: 600; font-size: 0.98rem; padding: var(--btn-pad); border-radius: var(--radius-pill);
  cursor: pointer; border: 1px solid transparent; text-decoration: none;
  transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-fast), background var(--dur-fast), border-color var(--dur-fast);
}
.btn--primary { background: var(--grad); color: #fff; box-shadow: var(--shadow-btn); }
.btn--primary:hover { transform: translateY(var(--lift-btn)); box-shadow: var(--shadow-btn-hover); }
.btn--ghost { background: var(--surface); color: var(--text); border-color: var(--border-2); }
.btn--ghost:hover { background: var(--surface-2); transform: translateY(var(--lift-btn)); border-color: var(--accent); }
.btn--block { width: 100%; justify-content: center; }
.btn__arrow { transition: transform var(--dur-fast) var(--ease); }
.btn:hover .btn__arrow { transform: translateX(5px); }

/* ============ Kicker / eyebrow ============ */
.kicker {
  display: inline-block; font-size: var(--fs-kicker); letter-spacing: var(--ls-kicker);
  text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: 14px;
}
.eyebrow-pill {
  display: inline-block; font-size: 0.82rem; letter-spacing: var(--ls-kicker); text-transform: uppercase;
  color: var(--accent); font-weight: 600; padding: 7px 16px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-2); background: var(--surface);
}

/* ============ Section heads ============ */
.section { padding: var(--section-pad) 0; position: relative; }
.section--alt { background: linear-gradient(180deg, transparent, rgba(255,255,255,0.018), transparent); }
.section__head { max-width: 720px; margin: 0 auto var(--head-gap); text-align: center; }
.section__head--left { margin-inline: 0; text-align: left; }
.section__title { font-size: var(--fs-title); margin-bottom: 18px; }
.section__sub { color: var(--muted); font-size: var(--fs-sub); margin: 0; }

/* ============ Glass card ============ */
.card {
  position: relative; padding: var(--card-pad); border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--border);
  transition: transform var(--dur-base) var(--ease), border-color var(--dur-base), background var(--dur-base), box-shadow var(--dur-base);
  overflow: hidden;
}
.card::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: var(--grad);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity var(--dur-base);
}
.card:hover { transform: translateY(var(--lift-card)); background: var(--surface-2); box-shadow: var(--shadow-card); }
.card:hover::before { opacity: 1; }
.card__icon {
  width: 54px; height: 54px; border-radius: var(--radius-icon); display: grid; place-items: center;
  background: var(--grad-soft); border: 1px solid var(--border-2); margin-bottom: 22px;
}
.card__icon svg { width: 26px; height: 26px; fill: none; stroke: var(--accent); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.card h3 { font-size: var(--fs-card-h); margin-bottom: 10px; }
.card p { color: var(--muted); font-size: var(--fs-body); margin: 0; }

/* ============ Tag pill ============ */
.tag {
  display: inline-block; font-size: var(--fs-tag); letter-spacing: var(--ls-tag); text-transform: uppercase;
  color: var(--accent); font-weight: 600; padding: 5px 12px; border-radius: var(--radius-pill);
  border: 1px solid var(--border-2); background: var(--surface);
}

/* ============ Stat box ============ */
.stat-box {
  padding: 28px 22px; border-radius: var(--radius); background: var(--surface);
  border: 1px solid var(--border); text-align: center;
  transition: transform 0.3s var(--ease), border-color 0.3s;
}
.stat-box:hover { transform: translateY(-4px); border-color: var(--border-2); }
.stat-box strong { display: block; font-family: var(--font-head); font-size: 2.2rem; font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat-box span { color: var(--muted); font-size: var(--fs-caption); }

/* ============ Form field (floating label) ============ */
.field { position: relative; }
.field input, .field textarea {
  width: 100%; background: rgba(255,255,255,0.02); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 18px 16px 8px; color: var(--text);
  font-family: inherit; font-size: 1rem;
  transition: border-color var(--dur-fast), background var(--dur-fast); resize: vertical;
}
.field textarea { padding-top: 24px; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--accent); background: rgba(34, 211, 238, 0.04); }
.field label {
  position: absolute; left: 16px; top: 15px; color: var(--muted-2); font-size: 1rem;
  pointer-events: none; transition: 0.2s var(--ease);
}
.field input:focus + label, .field input:not(:placeholder-shown) + label,
.field textarea:focus + label, .field textarea:not(:placeholder-shown) + label {
  top: 6px; font-size: 0.72rem; color: var(--accent); letter-spacing: 0.04em;
}
.field.invalid input, .field.invalid textarea { border-color: var(--error); }

/* ============ Brand lockup ============ */
.brand { display: flex; align-items: center; gap: 11px; font-family: var(--font-head); }
.brand__icon { display: grid; place-items: center; filter: drop-shadow(0 0 8px rgba(34, 211, 238, 0.35)); }
.brand__icon img { height: 40px; width: auto; display: block; }
.brand__text { font-size: 1.18rem; font-weight: 600; letter-spacing: 0.02em; color: var(--text); }
.brand__text strong { font-weight: 800; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ============ Blueprint grid backdrop ============ */
.grid-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px),
                    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-size) var(--grid-size);
  mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 30%, #000 30%, transparent 80%);
}

::selection { background: var(--selection); color: #fff; }