/*!**********************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[2]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[14].oneOf[12].use[3]!./styles/acron-landing.css ***!
  \**********************************************************************************************************************************************************************************************************************************************************************/
/* ============================================================
   Acron — Dark Authority landing page
   Source: "Acron Design System (5).zip" → acron-dark-authority/
     · colors_and_type.css  (design tokens + typography)
     · site/site-base.css   (layout primitives)
   Combined verbatim, EXCEPT bare element selectors (html/body/
   h1/h2/h3/p/code/kbd/samp/input/button) are re-scoped under
   `.uf-page` so the design's global resets cannot leak onto the
   rest of the app (login, dashboard, toasters, …). The 1440px
   page is centered on wider viewports; the dark surface bleeds
   left/right via `.acron-landing-root`.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700&family=Geist+Mono:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  /* ---------- Surfaces ---------- */
  --bg-0:        #F6F7F9;   /* app shell */
  --bg-1:        #FFFFFF;   /* sidebar */
  --bg-panel:    #FFFFFF;   /* card / panel / popover */
  --bg-hover:    #F2F3F6;   /* hover on neutral rows */
  --bg-active:   #EFEFF3;   /* pressed */
  --bg-inset:    #F2F3F6;   /* search fields, kbd, pills */
  --bg-tint:     #FAFAFC;   /* table thead, toast base */
  --bg-grid-dot: #DDE1E8;   /* dotted grid background */

  /* ---------- Edges (hairlines / borders) ---------- */
  --edge-1: rgba(15, 17, 22, 0.055);
  --edge-2: rgba(15, 17, 22, 0.09);
  --edge-3: rgba(15, 17, 22, 0.15);

  /* ---------- Foreground (text / icon) ---------- */
  --fg-0: #09090B;   /* primary text, headings, primary button fill */
  --fg-1: #27272A;   /* body */
  --fg-2: #52525B;   /* meta */
  --fg-3: #71717A;   /* muted label */
  --fg-4: #A1A1AA;   /* icon quiet, placeholder */
  --fg-5: #D4D4D8;   /* disabled, separator dot */

  /* ---------- Copper accent (THE brand color) ---------- */
  --cop-hi:   #F27A2D;
  --cop:      #DE5F15;
  --cop-lo:   #A74300;
  --cop-glow: rgba(222, 95, 21, 0.10);
  --cop-tint: rgba(222, 95, 21, 0.06);
  --cop-ring: rgba(222, 95, 21, 0.22);

  /* ---------- Workspace signatures ---------- */
  --sol-dso:  #5851E4;   /* DSO Suite */
  --sol-aip:  #DE5F15;   /* AIP (shares copper) */
  --sol-grid: #0284C7;   /* Grid Studio */
  --sol-cim:  #0D9488;   /* CIM Hub */
  --sol-rel:  #D1365E;   /* Reliability */
  --sol-pmx:  #7C3AED;   /* Project Matrix */

  /* ---------- AI Agent ---------- */
  --agent:      #8B5CF6;
  --agent-glow: rgba(139, 92, 246, 0.22);

  /* ---------- Status ---------- */
  --green-live:      #10B981;
  --green-live-ring: rgba(16, 185, 129, 0.22);
  --amber:           #F59E0B;
  --danger:          #DC2626;

  /* ---------- Typography — families ---------- */
  --font-sans:  'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-mono:  'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --font-feat:  'cv11', 'ss01';

  /* ---------- Typography — scale ---------- */
  --ts-display-hero:   42px;
  --ts-display-md:     34px;
  --ts-display-sm:     28px;
  --ts-heading-lg:     19px;
  --ts-heading-md:     15px;
  --ts-heading-sm:     13px;
  --ts-body:           13px;
  --ts-body-sm:        12.5px;
  --ts-caption:        11.5px;
  --ts-mono-meta:      10px;
  --ts-eyebrow:        9.5px;
  --ts-section-mono:   9px;
  --ts-kbd:            9.5px;

  /* ---------- Spacing (4px base) ---------- */
  --sp-0_5: 2px;
  --sp-1:   4px;
  --sp-1_5: 6px;
  --sp-2:   8px;
  --sp-2_5: 10px;
  --sp-3:   12px;
  --sp-3_5: 14px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-7:   28px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-14:  56px;
  --sp-16:  64px;
  --sp-20:  80px;

  /* ---------- Radius ---------- */
  --r-xs:      3px;
  --r-sm:      4px;
  --r-md:      5px;
  --r-base:    6px;   /* DEFAULT — inputs / buttons */
  --r-lg:      7px;   /* large buttons */
  --r-card:    8px;   /* cards / panels / tables */
  --r-panel:   8px;
  --r-section: 10px;  /* section wrappers / popovers */
  --r-popover: 10px;
  --r-pill:    999px;

  /* ---------- Shadow ---------- */
  --shadow-1:   0 1px 2px rgba(15,17,22,0.04), 0 1px 2px rgba(15,17,22,0.03);
  --shadow-2:   0 2px 4px rgba(15,17,22,0.04), 0 8px 20px -4px rgba(15,17,22,0.09);
  --shadow-pop: 0 1px 0 rgba(255,255,255,0.6) inset,
                0 24px 56px -12px rgba(15,17,22,0.26),
                0 8px 16px -6px rgba(15,17,22,0.06),
                0 0 0 1px rgba(15,17,22,0.05);
  --ring-focus: 0 0 0 3px var(--cop-ring);

  /* ---------- Motion ---------- */
  --ease-ios:     cubic-bezier(0.32, 0.72, 0, 1);   /* sidebar / switch */
  --ease-shell:   cubic-bezier(0.2, 0, 0, 1);       /* hover / popover / dropdown */
  --ease-rotate:  cubic-bezier(0.4, 0, 0.2, 1);     /* chevrons */

  --dur-micro:   120ms;
  --dur-hover:   140ms;
  --dur-control: 180ms;
  --dur-popover: 220ms;
  --dur-page:    300ms;
}

/* ============================================================
   ROOT WRAPPER — centers the 1440px page, dark bleed left/right.
   Replaces the design's index.html `html, body` shell + the
   colors_and_type.css base reset (scoped, never global).
   ============================================================ */
.acron-landing-root {
  width: 100%;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  background: #09090B;
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-feature-settings: var(--font-feat);
  font-size: var(--ts-body);
  line-height: 1.55;
  letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   SEMANTIC TYPE CLASSES — map to the JSON scale
   (bare element selectors scoped under `.uf-page`)
   ============================================================ */

.t-display-hero,
:where(.uf-page) h1.display {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--ts-display-hero);
  line-height: 1.04;
  letter-spacing: -0.018em;
  color: var(--fg-0);
}

.t-display-md {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--ts-display-md);
  line-height: 1.05;
  letter-spacing: -0.018em;
  color: var(--fg-0);
}

.t-display-sm {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: var(--ts-display-sm);
  line-height: 1.1;
  letter-spacing: -0.018em;
  color: var(--fg-0);
}

:where(.uf-page) h1, .t-heading-lg {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--ts-heading-lg);
  line-height: 1.2;
  letter-spacing: -0.012em;
  color: var(--fg-0);
}

:where(.uf-page) h2, .t-heading-md {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--ts-heading-md);
  line-height: 1.3;
  letter-spacing: -0.008em;
  color: var(--fg-0);
}

:where(.uf-page) h3, .t-heading-sm {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--ts-heading-sm);
  line-height: 1.35;
  letter-spacing: -0.008em;
  color: var(--fg-0);
}

:where(.uf-page) p, .t-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--ts-body);
  line-height: 1.55;
  letter-spacing: -0.003em;
  color: var(--fg-1);
}

.t-body-sm {
  font-size: var(--ts-body-sm);
  line-height: 1.5;
  letter-spacing: -0.003em;
  color: var(--fg-1);
}

.t-caption {
  font-size: var(--ts-caption);
  line-height: 1.45;
  letter-spacing: -0.003em;
  color: var(--fg-2);
}

.t-mono-meta,
:where(.uf-page) code, :where(.uf-page) kbd, :where(.uf-page) samp {
  font-family: var(--font-mono);
  font-size: var(--ts-mono-meta);
  line-height: 1.4;
  letter-spacing: 0.04em;
  color: var(--fg-2);
}

.t-eyebrow {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: var(--ts-eyebrow);
  line-height: 1.3;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cop);
}

.t-section-mono {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--ts-section-mono);
  line-height: 1.3;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--fg-4);
}

.t-kbd {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--ts-kbd);
  line-height: 1;
  letter-spacing: 0;
}

/* Numeric rule — always mono, tabular. */
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ============================================================
   SIGNATURE MOTIFS
   ============================================================ */

/* 24×24 dotted grid — content backgrounds */
.bg-dots {
  background-image: radial-gradient(circle at 1px 1px, var(--bg-grid-dot) 1px, transparent 0);
  background-size: 24px 24px;
}

/* Copper hairline — 1px horizontal fading accent */
.hairline-cop {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cop) 35%, var(--cop) 65%, transparent);
  opacity: 0.5;
}

/* Eyebrow preceded by a short cop hairline */
.eyebrow-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow-line::before {
  content: "";
  display: block;
  width: 22px;
  height: 1px;
  background: linear-gradient(90deg, var(--cop), transparent);
}

/* Corner-bracket motif — 10×10 L in cop at TL + BR */
.corner-brackets {
  position: relative;
}
.corner-brackets::before,
.corner-brackets::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1px solid var(--cop);
  opacity: 0.5;
  pointer-events: none;
}
.corner-brackets::before {
  top: -1px; left: -1px;
  border-right: none;
  border-bottom: none;
}
.corner-brackets::after {
  bottom: -1px; right: -1px;
  border-left: none;
  border-top: none;
}

/* Focus ring — applied to inputs/buttons within the landing only */
:where(.uf-page) .ring-focus:focus-visible,
:where(.uf-page) input:focus-visible,
:where(.uf-page) button:focus-visible,
:where(.uf-page) [role="button"]:focus-visible {
  outline: none;
  box-shadow: var(--ring-focus);
  border-color: var(--cop);
}

/* ============================================================
   SIGNATURE ANIMATIONS
   ============================================================ */

@keyframes brand-pulse {
  0%, 100% { opacity: 0.5; transform: scale(0.92); }
  50%      { opacity: 1;   transform: scale(1); }
}

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 var(--green-live-ring); }
  100% { box-shadow: 0 0 0 5px transparent; }
}

@keyframes spin-cop {
  to { transform: rotate(360deg); }
}

@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

@keyframes toast-in {
  from { opacity: 0; transform: translateX(20px) scale(0.98); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* ============================================================
   SITE BASE — layout + shared utilities
   ============================================================ */

/* ---- Layout containers ---- */
/* Full-bleed: the page fills the viewport edge-to-edge; the dark/light
   bands run full width while `.uf-container` keeps content centered. */
.uf-page {
  width: 100%;
  background: var(--bg-0);
  color: var(--fg-1);
  font-family: var(--font-sans);
  overflow: hidden;
  position: relative;
}
.uf-container {
  width: 1240px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 24px;
  position: relative;
}
.uf-container-narrow {
  width: 1040px;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 24px;
}

/* ---- Top nav ---- */
.uf-nav {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--edge-1);
  background: var(--bg-0);
  position: relative;
  z-index: 5;
}
.uf-nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
}
.uf-nav-link {
  font-size: 13px;
  color: var(--fg-2);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: -0.003em;
  transition: color 140ms var(--ease-shell);
}
.uf-nav-link:hover { color: var(--fg-0); }
.uf-nav-link.active { color: var(--fg-0); }

.uf-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--fg-0);
}
.uf-logo-dots {
  display: flex;
  gap: 4px;
}
.uf-logo-dots span {
  width: 6px; height: 6px; border-radius: 50%;
  background: linear-gradient(135deg, #666CFF, #8B5CF6);
}
.uf-logo-dots span:nth-child(2) { opacity: 0.7; }
.uf-logo-dots span:nth-child(3) { opacity: 0.45; }

/* ---- Buttons ---- */
.uf-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 16px;
  border-radius: var(--r-lg);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-sans);
  letter-spacing: -0.003em;
  border: none;
  cursor: pointer;
  transition: all 140ms var(--ease-shell);
  text-decoration: none;
  white-space: nowrap;
}
.uf-btn-primary {
  background: var(--fg-0);
  color: #fff;
}
.uf-btn-primary:hover { background: #1a1a1f; box-shadow: var(--shadow-2); }
.uf-btn-cop {
  background: var(--cop);
  color: #fff;
}
.uf-btn-cop:hover { background: var(--cop-lo); }
.uf-btn-ghost {
  background: transparent;
  color: var(--fg-1);
}
.uf-btn-ghost:hover { background: var(--bg-hover); }
.uf-btn-outline {
  background: transparent;
  color: var(--fg-0);
  box-shadow: inset 0 0 0 1px var(--edge-3);
}
.uf-btn-outline:hover { background: var(--bg-hover); }
.uf-btn-lg {
  height: 44px;
  padding: 0 22px;
  font-size: 14px;
}
.uf-btn-arrow {
  width: 14px; height: 14px;
  display: inline-block;
  margin-left: 4px;
  transition: transform 180ms var(--ease-shell);
}
.uf-btn:hover .uf-btn-arrow { transform: translateX(2px); }

/* ---- Eyebrow with hairline ---- */
.uf-eyebrow {
  font-family: var(--font-mono);
  font-weight: 600;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cop);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.uf-eyebrow::before {
  content: "";
  display: block;
  width: 24px;
  height: 1px;
  background: linear-gradient(90deg, var(--cop), transparent);
}
.uf-eyebrow.uf-eyebrow-quiet {
  color: var(--fg-3);
}
.uf-eyebrow.uf-eyebrow-quiet::before {
  background: linear-gradient(90deg, var(--fg-4), transparent);
}

/* ---- Display type ---- */
.uf-display-hero {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 84px;
  line-height: 1.02;
  letter-spacing: -0.022em;
  color: var(--fg-0);
}
.uf-display-xl {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 64px;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--fg-0);
}
.uf-display-lg {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 48px;
  line-height: 1.06;
  letter-spacing: -0.018em;
  color: var(--fg-0);
}
.uf-display-md {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 34px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: var(--fg-0);
}

/* On dark backgrounds */
.uf-on-dark { color: #F6F7F9; }
.uf-on-dark .uf-display-hero,
.uf-on-dark .uf-display-xl,
.uf-on-dark .uf-display-lg,
.uf-on-dark .uf-display-md { color: #FAFAFC; }

/* ---- Section ---- */
.uf-section {
  position: relative;
  padding: 96px 0;
}
.uf-section-head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 56px;
  max-width: 760px;
}
.uf-section-head.uf-section-head-center {
  margin-left: auto; margin-right: auto;
  align-items: center; text-align: center;
}

/* ---- Cards ---- */
.uf-card {
  background: var(--bg-panel);
  border: 1px solid var(--edge-1);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-1);
}

/* ---- Footer ---- */
.uf-footer {
  border-top: 1px solid var(--edge-1);
  padding: 72px 0 36px;
  background: var(--bg-0);
}
.uf-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}
.uf-footer-col h6 {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0 0 18px;
}
.uf-footer-col ul {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 10px;
}
.uf-footer-col li a {
  font-size: 13px;
  color: var(--fg-1);
  text-decoration: none;
}
.uf-footer-col li a:hover { color: var(--cop); }
.uf-footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 28px;
  border-top: 1px solid var(--edge-1);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--fg-3);
  letter-spacing: 0.04em;
}

/* ---- Mesh breath (subtle copper + indigo radial) ---- */
.uf-mesh {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 50% at 18% 22%, var(--cop-glow), transparent 60%),
    radial-gradient(ellipse 50% 50% at 82% 18%, rgba(88, 81, 228, 0.06), transparent 60%);
  animation: uf-mesh-breath 9s ease-in-out infinite;
}
@keyframes uf-mesh-breath {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.04); }
}

/* ---- Dot grid background ---- */
.uf-bg-dots {
  background-image: radial-gradient(circle at 1px 1px, var(--bg-grid-dot) 1px, transparent 0);
  background-size: 24px 24px;
}
.uf-bg-dots-dense {
  background-image: radial-gradient(circle at 1px 1px, rgba(15,17,22,0.10) 1px, transparent 0);
  background-size: 16px 16px;
}

/* ---- Workspace dot ---- */
.uf-ws-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
}

/* ---- Pill chip ---- */
.uf-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--bg-inset);
  color: var(--fg-2);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.003em;
}
.uf-chip-cop {
  background: var(--cop-tint);
  color: var(--cop-lo);
}
.uf-chip-live {
  background: rgba(16, 185, 129, 0.10);
  color: #047857;
}
.uf-chip-live::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green-live);
  box-shadow: 0 0 0 0 var(--green-live-ring);
  animation: pulse-ring 2400ms ease-out infinite;
}

/* ---- Scroll-fade-in primitive ---- */
.uf-fadein {
  opacity: 0;
  transform: translateY(12px);
  animation: uf-fadein 720ms var(--ease-shell) forwards;
}
@keyframes uf-fadein {
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Dark surfaces ---- */
.uf-dark {
  background: #09090B;
  color: #D4D4D8;
}
.uf-dark .uf-eyebrow { color: var(--cop-hi); }
.uf-dark .uf-card {
  background: rgba(255,255,255,0.03);
  border-color: rgba(255,255,255,0.08);
}
.uf-dark .uf-bg-dots {
  background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.06) 1px, transparent 0);
}

/* ---- Synthetic product mock ---- */
.uf-mock {
  background: var(--bg-panel);
  border: 1px solid var(--edge-2);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
  overflow: hidden;
  position: relative;
}
.uf-mock-bar {
  height: 36px;
  background: var(--bg-tint);
  border-bottom: 1px solid var(--edge-1);
  display: flex;
  align-items: center;
  padding: 0 12px;
  gap: 8px;
}
.uf-mock-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--fg-5);
}

/* Numeric tabular */
.uf-num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

/* ---- Architecture diagram — animated data flow ----
   Each connector sets pathLength=100 so the dash pattern is normalized
   and loops seamlessly regardless of the path's real length. Negative
   dashoffset marches the dashes toward the path END (= the data-flow
   direction: source → CIM Hub → workspace → surface). */
@keyframes uf-arch-flow {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -100; }
}
/* Gray connectors: steady marching dashes (period 10 divides 100). */
.uf-arch-line {
  stroke-dasharray: 4 6;
  animation: uf-arch-flow 3s linear infinite;
}
/* Copper connectors: a single bright segment travels the whole line
   (3 lit + 97 gap = 100 = one pulse per loop). */
.uf-arch-pulse {
  stroke-dasharray: 3 97;
  stroke-linecap: round;
  animation: uf-arch-flow 2s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .uf-arch-line,
  .uf-arch-pulse { animation: none; }
}