/* ── Degular brand typeface ─────────────────────────────── */
@font-face{font-family:'Degular';src:url('../fonts/DegularDemo-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Degular';src:url('../fonts/DegularDemo-Medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Degular';src:url('../fonts/DegularDemo-Bold.otf') format('opentype');font-weight:600 900;font-style:normal;font-display:swap}
@font-face{font-family:'Degular';src:url('../fonts/DegularDemo-Italic.otf') format('opentype');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Degular';src:url('../fonts/DegularDemo-MediumItalic.otf') format('opentype');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'Degular';src:url('../fonts/DegularDemo-BoldItalic.otf') format('opentype');font-weight:600 900;font-style:italic;font-display:swap}
@font-face{font-family:'Degular';src:url('../fonts/DegularDemo-LightItalic.otf') format('opentype');font-weight:300;font-style:italic;font-display:swap}

/* Base font size bump (+1px) so Degular reads comfortably */
html{font-size:18px}

/*
 * SAPlytics AI – Common Stylesheet
 * Shared styles used across all pages.
 * Load this before any page-specific stylesheet.
 *
 * Brand palette:
 *   --brand-navy:   #0B0B0B
 *   --brand-violet: #4768FE
 *   --brand-gold:   #4768FE
 *   --brand-amber:  #2E4BE0
 */

/* ── Alpine.js cloak ─────────────────────────────────────── */
[x-cloak] {
  display: none !important;
}

/* ── CLS: reserve space for JS-injected nav + footer ─────── */
#nav-placeholder    { min-height: 64px; }
#footer-placeholder { min-height: 320px; }

/* ── Hero section gradient (shared base) ─────────────────── */
.hero-bg {
  background: radial-gradient(ellipse at 70% 50%, #1B2150 0%, #0B0B0B 60%);
}

/* ── Gradient icon boxes ─────────────────────────────────── */
.icon-box {
  background: linear-gradient(135deg, #4768FE 0%, #2E4BE0 100%);
}

.icon-box-gold {
  background: linear-gradient(135deg, #4768FE 0%, #2E4BE0 100%);
}

/* ── Scrollbar hide (carousel / overflow panels) ─────────── */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ── Active nav underline ────────────────────────────────── */
.nav-active {
  border-bottom: 2px solid #4768FE;
}

/* ── Logo colour variants ────────────────────────────────── */
.logo-sap    { color: #4768FE; font-weight: 800; }
.logo-pipe   { color: #4768FE; }
.logo-lytics { color: #0B0B0B; font-weight: 700; }
.logo-ai     { color: #4768FE; font-weight: 800; }

/* White / on-dark logo variant */
.logo-sap-w    { color: #ffffff; font-weight: 800; }
.logo-lytics-w { color: #ffffff; font-weight: 700; }

/* ── Form labels ─────────────────────────────────────────── */
/* Equivalent of: block text-sm font-semibold text-gray-700 mb-1.5 */
.form-label {
  display: block;
  font-size: 0.875rem;
  line-height: 1.25rem;
  font-weight: 600;
  color: rgb(55 65 81);
  margin-bottom: 0.375rem;
}

/* ── Form inputs (base; dynamic states via Alpine :class) ── */
/* Equivalent of: w-full px-4 py-3 rounded-xl border bg-white
   text-gray-900 text-sm placeholder-gray-400
   focus:outline-none focus:ring-2 transition-all */
.form-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  border-width: 1px;
  border-style: solid;
  border-color: rgb(229 231 235);
  background-color: #ffffff;
  color: rgb(17 24 39);
  font-size: 0.875rem;
  line-height: 1.25rem;
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.form-input::placeholder {
  color: rgb(156 163 175);
}

.form-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(108, 71, 255, 0.3);
  border-color: #4768FE;
}