/* ============================================
   LOCARDE V2 — Global Design System
   ============================================ */

/* ---------- Reset ---------- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  line-height: 1.5;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

ul, ol {
  list-style: none;
}

/* ---------- Font Faces ---------- */
@font-face {
  font-family: 'BDO Grotesk';
  src: url('../fonts/BDOGrotesk-VF.ttf') format('truetype');
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Mono';
  src: url('../fonts/DMMono-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DM Mono';
  src: url('../fonts/DMMono-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---------- CSS Custom Properties ---------- */
:root {
  /* Colors */
  --color-dark: #000;
  --color-white: #fff;
  --color-brand: #0f5bff;
  --color-white-border: rgba(255, 255, 255, 0.25);
  --color-white-15: rgba(255, 255, 255, 0.15);
  --color-white-muted: rgba(255, 255, 255, 0.5);
  --color-white-input-border: rgba(255, 255, 255, 0.25);
  --color-dark-15: rgba(0, 0, 0, 0.15);
  --color-dark-caption-bg: rgba(0, 0, 0, 0.5);
  --color-text-on-brand: var(--color-white);
  --color-success: #a9ee81;
  --color-error: #f5aaaa;

  /* Typography */
  --font-body: 'BDO Grotesk', Arial, sans-serif;
  --font-headings: 'BDO Grotesk', Arial, sans-serif;
  --font-badges: 'DM Mono', 'Trebuchet MS', sans-serif;

  --type-base-unit: 15px;
  --type-body-size: 20px;
  --type-scale: 1.26;

  /* Modular type scale */
  --type-small: calc(var(--type-base-unit) / var(--type-scale));
  --type-lead: calc(var(--type-base-unit) * var(--type-scale));
  --type-h5: calc(var(--type-lead) * var(--type-scale));
  --type-h4: calc(var(--type-h5) * var(--type-scale));
  --type-h3: calc(var(--type-h4) * var(--type-scale));
  --type-h2: calc(var(--type-h3) * var(--type-scale));
  --type-h1: calc(var(--type-h2) * var(--type-scale));

  /* Line heights */
  --lh-body: 1.5em;
  --lh-lead: 1.5em;
  --lh-small: 1.5em;
  --lh-h1: 1.2em;
  --lh-h2: 1.25em;
  --lh-h3: 1.3em;
  --lh-h4: 1.35em;
  --lh-h5: 1.35em;

  /* Spacing (base: 24px) */
  --gap-base: 24px;
  --gap-0125: 3px;
  --gap-025: 6px;
  --gap-05: 12px;
  --gap-075: 18px;
  --gap-1: 24px;
  --gap-15: 36px;
  --gap-2: 48px;
  --gap-3: 72px;
  --gap-4: 96px;
  --gap-6: 144px;
  --gap-7: 168px;

  /* Section padding */
  --section-padding: 96px;
  --section-padding-2x: 192px;
  --section-padding-half: 48px;

  /* Grid */
  --grid-columns: 12;
  --grid-gap: 24px;
  --grid-gutter: 36px;

  /* Grid column widths (matches Webflow 12-col system) */
  --grid-col-2: calc((((100vw - (2 * var(--grid-gutter))) - (11 * var(--grid-gap))) / 12) * 2 + 1 * var(--grid-gap));
  --grid-col-3: calc((((100vw - (2 * var(--grid-gutter))) - (11 * var(--grid-gap))) / 12) * 3 + 2 * var(--grid-gap));
  --grid-col-4: calc((((100vw - (2 * var(--grid-gutter))) - (11 * var(--grid-gap))) / 12) * 4 + 3 * var(--grid-gap));
  --grid-col-6: calc((((100vw - (2 * var(--grid-gutter))) - (11 * var(--grid-gap))) / 12) * 6 + 5 * var(--grid-gap));
  --grid-col-8: calc((((100vw - (2 * var(--grid-gutter))) - (11 * var(--grid-gap))) / 12) * 8 + 7 * var(--grid-gap));
  --grid-col-9: calc((((100vw - (2 * var(--grid-gutter))) - (11 * var(--grid-gap))) / 12) * 9 + 8 * var(--grid-gap));
  --grid-col-10: calc((((100vw - (2 * var(--grid-gutter))) - (11 * var(--grid-gap))) / 12) * 10 + 9 * var(--grid-gap));

  /* Border radius */
  --radius: 4px;
  --radius-2x: 8px;
  --radius-dropdown: 8px;

  /* Button */
  --btn-height: 96px;
  --btn-width: 240px;
  --btn-padding-y: 12px;
  --btn-padding-x: 12px;
  --btn-radius: 4px;
  --btn-blur: 24px;

  /* Forms */
  --input-height: 48px;
  --input-x-padding: 0px;
  --input-border-radius: 0px;
  --textarea-min-height: 200px;
  --checkbox-size: 18px;

  /* Effects */
  --blur-box: 24px;
  --dot-size: 8px;

  /* Navbar */
  --navbar-height: 68px;
  --navbar-links-gap: var(--grid-gap);
}

/* ---------- Base Typography (Variable Font Weights) ---------- */
body {
  font-family: var(--font-body);
  font-size: var(--type-body-size);
  line-height: var(--lh-body);
  color: var(--color-white);
  background-color: var(--color-dark);
  font-variation-settings: "wght" 350;
}

h1, .h1 {
  font-family: var(--font-headings);
  font-size: var(--type-h1);
  line-height: var(--lh-h1);
  font-variation-settings: "wght" 350;
}

h2, .h2 {
  font-family: var(--font-headings);
  font-size: var(--type-h2);
  line-height: var(--lh-h2);
  font-variation-settings: "wght" 350;
}

h3, .h3 {
  font-family: var(--font-headings);
  font-size: var(--type-h3);
  line-height: var(--lh-h3);
  font-variation-settings: "wght" 350;
}

h4, .h4 {
  font-family: var(--font-headings);
  font-size: var(--type-h4);
  line-height: var(--lh-h4);
  font-variation-settings: "wght" 350;
}

h5, .h5 {
  font-family: var(--font-headings);
  font-size: var(--type-h5);
  line-height: var(--lh-h5);
  font-variation-settings: "wght" 350;
}

h6, .h6 {
  font-family: var(--font-headings);
  font-variation-settings: "wght" 450;
}

a {
  font-variation-settings: "wght" 400;
}

p, .paragraph {
  font-variation-settings: "wght" 300;
}

.text-lead {
  font-size: var(--type-lead);
  line-height: var(--lh-lead);
  font-variation-settings: "wght" 350;
}

.text-small {
  font-size: var(--type-small);
  line-height: var(--lh-small);
  font-variation-settings: "wght" 375;
}

.text-muted {
  color: var(--color-white-muted);
}

.text-brand {
  color: var(--color-brand);
}

.badge-text {
  font-family: var(--font-badges);
  font-weight: 500;
  font-size: var(--type-small);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ---------- Decorative: Dots ---------- */
.dot {
  z-index: 3;
  width: var(--dot-size);
  height: var(--dot-size);
  background-color: var(--color-white);
  position: absolute;
}

.dot.north-west { top: 0; left: 0; transform: translate(-50%, -50%); }
.dot.north-east { top: 0; right: 0; transform: translate(50%, -50%); }
.dot.south-west { bottom: 0; left: 0; transform: translate(-50%, 50%); }
.dot.south-east { bottom: 0; right: 0; transform: translate(50%, 50%); }
.dot.inside-title { position: relative; transform: translate(-50%, -50%); }

/* ---------- Decorative: Lines ---------- */
.line {
  background-color: var(--color-white-border);
  position: relative;
  overflow: hidden;
}

.line.horizontal {
  width: 100%;
  height: 1px;
}

.line.vertical {
  width: 1px;
  height: 100%;
}

.line.top { position: absolute; top: 0; left: 0; width: 100%; height: 1px; }
.line.bottom { position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; }
.line.right { position: absolute; top: 1px; right: 0; width: 1px; height: calc(100% - 1px); }
.line.left { position: absolute; top: 1px; left: 0; width: 1px; height: calc(100% - 2px); }

/* Animated gradient sweep inside lines */
.gradient-line-h {
  background-image: linear-gradient(90deg, transparent, var(--color-brand) 93%, transparent);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-100%);
}

.gradient-line-v {
  background-image: linear-gradient(180deg, transparent, var(--color-brand) 93%, transparent);
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-100%);
}

/* ---------- Image Utilities ---------- */
img {
  object-fit: cover;
}

.image-wrapper {
  background-color: rgba(255, 255, 255, 0.07);
  width: 100%;
  position: relative;
  overflow: hidden;
}

.image-wrapper.portrait  { aspect-ratio: 3 / 4; }
.image-wrapper.square    { aspect-ratio: 1; }
.image-wrapper.widescreen { aspect-ratio: 16 / 9; }

.image-fill {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

/* ---------- Parallax ---------- */
.parallax-wrapper {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(1.1);
  overflow: hidden;
}

.parallax-wrapper.muted {
  opacity: 0.3;
}

/* ---------- Layout Utilities ---------- */
.container {
  width: 100%;
  max-width: calc(100vw - (2 * var(--grid-gutter)));
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--grid-gutter);
  padding-right: var(--grid-gutter);
}

.section {
  padding-top: var(--section-padding);
  padding-bottom: var(--section-padding);
}

.section-2x {
  padding-top: var(--section-padding-2x);
  padding-bottom: var(--section-padding-2x);
}

.section-half {
  padding-top: var(--section-padding-half);
  padding-bottom: var(--section-padding-half);
}

.grid {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap: var(--grid-gap);
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.flex-center {
  align-items: center;
  justify-content: center;
}

.flex-between {
  justify-content: space-between;
}

.flex-align-center {
  align-items: center;
}

.gap-025 { gap: var(--gap-025); }
.gap-05 { gap: var(--gap-05); }
.gap-075 { gap: var(--gap-075); }
.gap-1 { gap: var(--gap-1); }
.gap-15 { gap: var(--gap-15); }
.gap-2 { gap: var(--gap-2); }
.gap-3 { gap: var(--gap-3); }
.gap-4 { gap: var(--gap-4); }

/* ---------- Buttons (Premium Hover System) ---------- */
.btn {
  display: inline-flex;
  align-items: flex-end;
  justify-content: space-between;
  height: var(--btn-height);
  min-width: var(--btn-width);
  padding: var(--btn-padding-y);
  border-radius: var(--btn-radius);
  font-family: var(--font-body);
  font-size: var(--type-base-unit);
  font-variation-settings: "wght" 400;
  cursor: pointer;
  border: none;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: color 0.3s ease;
}

.btn__text {
  position: relative;
  z-index: 2;
}

.btn__icon-wrap {
  width: 18px;
  height: 18px;
  overflow: hidden;
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
}

.btn__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  transition: transform 0.3s ease;
}

.btn:hover .btn__icon {
  transform: translateY(-18px);
}

/* Hidden circle that sweeps up on hover */
.btn__hover-circle {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 1;
  background-color: var(--color-white);
  border-radius: 50%;
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.btn:hover .btn__hover-circle {
  transform: translateY(20%);
}

.btn:hover {
  color: var(--color-dark);
}

.btn-brand {
  background-color: var(--color-brand);
  color: var(--color-text-on-brand);
}

.btn-glass {
  background-color: var(--color-white-15);
  color: var(--color-white);
  backdrop-filter: blur(var(--btn-blur));
  -webkit-backdrop-filter: blur(var(--btn-blur));
  border: 1px solid var(--color-white-border);
}

.btn-outline {
  background: transparent;
  color: var(--color-white);
  border: 1px solid var(--color-white-border);
}

/* ---------- Form Inputs ---------- */
.input {
  height: var(--input-height);
  padding: 0 var(--input-x-padding);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-white-input-border);
  border-radius: var(--input-border-radius);
  color: var(--color-white);
  font-size: var(--type-base-unit);
  outline: none;
  width: 100%;
  transition: border-color 0.3s ease;
}

.input:focus {
  border-bottom-color: var(--color-white);
}

.input::placeholder {
  color: var(--color-white-muted);
}

textarea.input {
  min-height: var(--textarea-min-height);
  resize: vertical;
  padding-top: 12px;
}

/* ---------- Noise Texture Overlay ---------- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.4;
  background-size: 200px;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48ZmlsdGVyIGlkPSJhIj48ZmVUdXJidWxlbmNlIHR5cGU9ImZyYWN0YWxOb2lzZSIgYmFzZUZyZXF1ZW5jeT0iLjc1IiBzdGl0Y2hUaWxlcz0ic3RpdGNoIi8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsdGVyPSJ1cmwoI2EpIiBvcGFjaXR5PSIuMDUiLz48L3N2Zz4=");
}

/* ---------- Custom Text Selection ---------- */
::selection {
  background-color: rgba(15, 91, 255, 0.3);
  color: #fff;
}

/* ---------- Scroll Progress Bar ---------- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--color-brand), #4d8bff);
  z-index: 10001;
  width: 0%;
  pointer-events: none;
  transition: none;
}

/* ---------- Cursor Glow ---------- */
.cursor-glow {
  position: fixed;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(15, 91, 255, 0.07) 0%, transparent 70%);
  pointer-events: none;
  z-index: 1;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cursor-glow.is-active {
  opacity: 1;
}

/* ---------- Selection ---------- */
::selection {
  background-color: rgba(15, 91, 255, 0.3);
  color: var(--color-white);
}

/* ---------- Focus-Visible (Accessibility) ---------- */
:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 3px;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- Skip to Content Link ---------- */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--grid-gutter);
  z-index: 10002;
  padding: 8px 16px;
  background-color: var(--color-brand);
  color: var(--color-white);
  font-size: var(--type-small);
  font-weight: 500;
  text-decoration: none;
  border-radius: 0 0 4px 4px;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  /* Tablet */
}

@media (max-width: 767px) {
  :root {
    --type-scale: 1.19;
  }
}

@media (max-width: 479px) {
  :root {
    --type-base-unit: 14px;
    --type-scale: 1.19;
    --grid-gutter: 24px;
    --btn-width: 180px;
    --section-padding: 72px;
    --section-padding-2x: 144px;
    --section-padding-half: 36px;
  }
}