/* Dev Fabric — Flow Edition v5.0 / source reference: dark editorial, lime motion.
   Additive visual layer. Scoped to the Dev Fabric brand; no business logic changes. */
:root[data-brand="dev-fabric"] {
  color-scheme: dark;
  --bg: #050806;
  --bg-alt: #090e0b;
  --panel: #0b130e;
  --panel-strong: #122016;
  --text: #f5f8f1;
  --muted: #9ba99d;
  --border: rgba(202, 245, 162, .14);
  --accent: #c3ff55;
  --accent-soft: rgba(195, 255, 85, .14);
  --accent-secondary: #8edc86;
  --cyan: #91efad;
  --shadow: 0 34px 100px rgba(0, 0, 0, .46);
  background: #050806;
}
:root[data-brand="dev-fabric"] body {
  background: #050806 !important;
  color: #f5f8f1;
}
:root[data-brand="dev-fabric"] body::before {
  background:
    radial-gradient(circle at 85% 22%, rgba(136, 214, 69, .09), transparent 32%),
    radial-gradient(circle at 12% 60%, rgba(83, 138, 87, .04), transparent 36%),
    linear-gradient(180deg, #050806, #080c09 48%, #050806);
  opacity: 1;
}
:root[data-brand="dev-fabric"] .fa-ambient::before {
  background: #3c7e47;
  opacity: .34;
}
:root[data-brand="dev-fabric"] .fa-ambient::after {
  background: #b8ff3f;
  opacity: .26;
}
:root[data-brand="dev-fabric"] .site-header {
  background: rgba(5, 8, 6, .81) !important;
  border-bottom: 1px solid rgba(201, 241, 172, .10) !important;
  box-shadow: 0 10px 50px rgba(0, 0, 0, .14);
  backdrop-filter: blur(22px) saturate(135%);
  -webkit-backdrop-filter: blur(22px) saturate(135%);
}
:root[data-brand="dev-fabric"] .header-inner { min-height: 76px; }
:root[data-brand="dev-fabric"] .brand-icon {
  background: rgba(184, 255, 63, .055) !important;
  border: 1px solid rgba(195, 255, 85, .22) !important;
  box-shadow: inset 0 0 22px rgba(195, 255, 85, .06), 0 0 27px rgba(195, 255, 85, .10);
}
:root[data-brand="dev-fabric"] .brand-text small { color: #93a98d !important; }
:root[data-brand="dev-fabric"] .nav > a:not(.button) { color: #b7c5b5 !important; }
:root[data-brand="dev-fabric"] .nav > a:not(.button):hover,
:root[data-brand="dev-fabric"] .nav > a[aria-current] { color: #d1ff82 !important; }
:root[data-brand="dev-fabric"] .button,
:root[data-brand="dev-fabric"] .nav-cabinet {
  border-radius: 999px !important;
  letter-spacing: -.015em;
}
:root[data-brand="dev-fabric"] .button.primary {
  background: linear-gradient(115deg, #d7ff77 0%, #b9ff3c 70%, #a9f731 100%) !important;
  color: #091308 !important;
  border-color: rgba(220, 255, 156, .82) !important;
  box-shadow: 0 12px 36px rgba(184, 255, 63, .15), inset 0 1px 0 rgba(255, 255, 255, .28) !important;
}
:root[data-brand="dev-fabric"] .button.primary:hover {
  box-shadow: 0 17px 46px rgba(184, 255, 63, .30), inset 0 1px 0 rgba(255, 255, 255, .4) !important;
  transform: translateY(-2px);
}
:root[data-brand="dev-fabric"] .button.secondary,
:root[data-brand="dev-fabric"] .button.ghost {
  border-color: rgba(209, 237, 203, .20) !important;
  background: rgba(15, 25, 16, .56) !important;
  color: #f4f9ef !important;
  backdrop-filter: blur(12px);
}
:root[data-brand="dev-fabric"] .button.secondary:hover,
:root[data-brand="dev-fabric"] .button.ghost:hover {
  border-color: rgba(195, 255, 85, .56) !important;
  background: rgba(30, 51, 24, .70) !important;
}
:root[data-brand="dev-fabric"] .eyebrow {
  color: #bfff4b !important;
  letter-spacing: .17em;
  font-weight: 700;
}
:root[data-brand="dev-fabric"] .df-hero {
  position: relative;
  isolation: isolate;
  min-height: 780px;
  padding-top: clamp(62px, 6.5vw, 102px);
  padding-bottom: clamp(74px, 7vw, 120px);
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(5, 8, 6, .99) 0%, rgba(5, 8, 6, .95) 29%, rgba(5, 8, 6, .64) 49%, rgba(5, 8, 6, .19) 78%, rgba(5, 8, 6, .48) 100%),
    url('/assets/fabric-flow-v5.svg') center 52% / cover no-repeat,
    #050806 !important;
}
:root[data-brand="dev-fabric"] .df-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(179, 231, 157, .024) 1px, transparent 1px),
    linear-gradient(90deg, rgba(179, 231, 157, .024) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: linear-gradient(90deg, transparent, #000 28%, #000 100%);
  pointer-events: none;
  z-index: 0;
}
:root[data-brand="dev-fabric"] .df-hero::after {
  content: "";
  position: absolute;
  top: -32%; right: -20%;
  width: min(82vw, 1200px);
  height: 130%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(ellipse, rgba(170, 255, 93, .11) 0%, rgba(83, 184, 91, .045) 38%, transparent 68%);
  filter: blur(34px);
  animation: df-flow-breathe 12s ease-in-out infinite alternate;
  z-index: 0;
}
@keyframes df-flow-breathe {
  from { transform: translate(-3%, 2%) scale(.96); opacity: .60; }
  to { transform: translate(4%, -3%) scale(1.08); opacity: 1; }
}
:root[data-brand="dev-fabric"] .df-hero-grid {
  position: relative;
  z-index: 2;
  grid-template-columns: minmax(0, .94fr) minmax(510px, 1.06fr);
  align-items: center;
  gap: clamp(20px, 3.5vw, 58px);
}
:root[data-brand="dev-fabric"] .df-hero-copy {
  position: relative;
  z-index: 3;
}
:root[data-brand="dev-fabric"] .df-hero-copy .eyebrow {
  font-size: .68rem;
  margin-bottom: clamp(22px, 3vw, 37px);
}
:root[data-brand="dev-fabric"] .df-hero-copy h1 {
  max-width: 790px;
  color: #f9fcf6;
  font-size: clamp(3rem, 5.0vw, 5.3rem);
  font-weight: 680;
  line-height: 1.035;
  letter-spacing: -.065em;
  text-wrap: balance;
  text-shadow: 0 1px 42px rgba(0, 0, 0, .65);
}
:root[data-brand="dev-fabric"] .df-hero-copy h1 .df-title-line { display: block; }
:root[data-brand="dev-fabric"] .df-hero-copy h1 em {
  display: block;
  margin-top: .035em;
  padding-bottom: .12em;
  font: italic 400 .91em/1.06 Georgia, 'Times New Roman', serif;
  letter-spacing: -.061em;
  color: #d1ff87;
  text-wrap: pretty;
}
:root[data-brand="dev-fabric"] .df-hero-copy .lead {
  max-width: 570px;
  margin-top: 27px;
  color: #b2c2ae;
  font-size: clamp(1rem, 1.17vw, 1.12rem);
  line-height: 1.83;
}
:root[data-brand="dev-fabric"] .df-hero-actions { margin-top: 34px; gap: 12px; }
:root[data-brand="dev-fabric"] .df-hero-meta {
  margin-top: 27px;
  color: #93a88e;
  font-size: .8rem;
  letter-spacing: .025em;
}
:root[data-brand="dev-fabric"] .df-hero-meta i { color: #c3ff55 !important; }
/* Floating product scene becomes an illuminated workflow console. */
:root[data-brand="dev-fabric"] .fa-assembly-wrap {
  position: relative;
  isolation: isolate;
  min-height: 560px;
  padding: 18px 0;
}
:root[data-brand="dev-fabric"] .fa-assembly-wrap::before {
  content: "";
  position: absolute;
  inset: 7% -2% 4%;
  border: 1px solid rgba(202, 245, 162, .13);
  border-radius: 28px;
  background:
    radial-gradient(ellipse at 59% 48%, rgba(130, 230, 73, .13), transparent 53%),
    linear-gradient(145deg, rgba(26, 42, 25, .71), rgba(6, 13, 9, .78) 39%, rgba(7, 16, 12, .75));
  box-shadow: inset 0 1px 0 rgba(226, 255, 201, .07), inset 0 0 55px rgba(128, 214, 66, .04), 0 36px 115px rgba(0, 0, 0, .32);
  backdrop-filter: blur(16px);
  pointer-events: none;
  z-index: -1;
}
:root[data-brand="dev-fabric"] .fa-assembly-wrap::after {
  content: "●  DEV FABRIC  /  LIVE WORKFLOW";
  position: absolute;
  top: 11%; left: 4%;
  z-index: 2;
  color: #baff69;
  font: 500 10px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .13em;
  opacity: .76;
  pointer-events: none;
}
:root[data-brand="dev-fabric"] .fa-assembly {
  filter: drop-shadow(0 10px 30px rgba(0, 0, 0, .30));
}
:root[data-brand="dev-fabric"] .fa-module-front {
  background: linear-gradient(150deg, rgba(22, 35, 26, .96), rgba(7, 15, 11, .98)) !important;
  border-color: rgba(180, 234, 159, .23) !important;
  box-shadow: inset 0 1px 0 rgba(227, 255, 215, .08), 0 20px 45px rgba(0, 0, 0, .32);
}
:root[data-brand="dev-fabric"] .fa-module small { color: #93ac94; }
:root[data-brand="dev-fabric"] .fa-core .fa-cube-front {
  background: linear-gradient(150deg, #223727, #0a140e) !important;
  border-color: rgba(196, 255, 85, .55) !important;
  box-shadow: 0 0 68px rgba(195, 255, 85, .16), inset 0 1px 0 rgba(255, 255, 255, .1);
}
:root[data-brand="dev-fabric"] .fa-assembly-detail {
  background: rgba(7, 16, 9, .92) !important;
  border: 1px solid rgba(190, 235, 155, .16) !important;
  color: #a8bba5;
  border-radius: 999px !important;
}
:root[data-brand="dev-fabric"] .df-capability-band {
  background: #080d09 !important;
  border-top-color: rgba(188, 246, 129, .11) !important;
  border-bottom-color: rgba(188, 246, 129, .11) !important;
}
:root[data-brand="dev-fabric"] .df-capability-inner > i {
  background: #baff62;
  box-shadow: 0 0 16px rgba(195, 255, 85, .45);
}
:root[data-brand="dev-fabric"] .df-capability-inner > b { color: #dde9d8; }
:root[data-brand="dev-fabric"] .df-section-head h2,
:root[data-brand="dev-fabric"] .section-head h2 {
  color: #f8fcf5;
  letter-spacing: -.05em;
  line-height: 1.09;
  text-wrap: balance;
}
:root[data-brand="dev-fabric"] .df-ready-section,
:root[data-brand="dev-fabric"] .df-process-section,
:root[data-brand="dev-fabric"] .df-design-teaser {
  position: relative;
  isolation: isolate;
}
:root[data-brand="dev-fabric"] .df-ready-section::before {
  content: "";
  position: absolute;
  right: -17%; top: 2%;
  width: 57%; height: 77%;
  background: radial-gradient(ellipse, rgba(130, 226, 75, .085), transparent 69%);
  filter: blur(32px);
  pointer-events: none;
  z-index: -1;
}
:root[data-brand="dev-fabric"] .df-ready-card,
:root[data-brand="dev-fabric"] .df-solution-card,
:root[data-brand="dev-fabric"] .df-service-card,
:root[data-brand="dev-fabric"] .df-landing-card,
:root[data-brand="dev-fabric"] .df-landing-nav-card,
:root[data-brand="dev-fabric"] .df-product-feature {
  border: 1px solid rgba(183, 232, 159, .17) !important;
  border-radius: 24px !important;
  background-color: #0c140e;
  box-shadow: inset 0 1px 0 rgba(221, 255, 218, .055), 0 24px 55px rgba(0, 0, 0, .16);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), border-color .35s ease, box-shadow .35s ease, background-color .35s ease;
}
:root[data-brand="dev-fabric"] .df-ready-card:hover,
:root[data-brand="dev-fabric"] .df-ready-card:focus-visible,
:root[data-brand="dev-fabric"] .df-solution-card:hover,
:root[data-brand="dev-fabric"] .df-landing-card:hover,
:root[data-brand="dev-fabric"] .df-landing-nav-card:hover,
:root[data-brand="dev-fabric"] .df-service-card:hover {
  transform: translateY(-6px);
  border-color: rgba(196, 255, 92, .62) !important;
  box-shadow: inset 0 1px 0 rgba(230, 255, 197, .09), 0 28px 70px rgba(0, 0, 0, .34), 0 0 40px rgba(151, 236, 88, .08);
}
:root[data-brand="dev-fabric"] .df-ready-kicker,
:root[data-brand="dev-fabric"] .df-solution-card > span:first-child {
  color: #bdff61 !important;
  letter-spacing: .14em;
}
:root[data-brand="dev-fabric"] .df-design-teaser {
  border-top: 1px solid rgba(189, 249, 148, .10);
  border-bottom: 1px solid rgba(189, 249, 148, .10);
}
:root[data-brand="dev-fabric"] .df-design-teaser-previews a {
  border-radius: 19px;
  overflow: hidden;
  border: 1px solid rgba(203, 243, 164, .14);
  transition: transform .38s ease, border-color .38s ease, box-shadow .38s ease;
}
:root[data-brand="dev-fabric"] .df-design-teaser-previews a:hover {
  transform: translateY(-5px);
  border-color: rgba(195, 255, 85, .56);
  box-shadow: 0 25px 65px rgba(0, 0, 0, .3);
}
:root[data-brand="dev-fabric"] .df-approach,
:root[data-brand="dev-fabric"] .df-landing-hero,
:root[data-brand="dev-fabric"] .df-product-hero,
:root[data-brand="dev-fabric"] .df-solutions-hub-hero {
  background-color: #070d09;
  background-image:
    linear-gradient(90deg, rgba(6, 10, 7, .98), rgba(6, 10, 7, .69) 54%, rgba(6, 10, 7, .44)),
    url('/assets/fabric-flow-v5.svg');
  background-position: center;
  background-size: cover;
}
:root[data-brand="dev-fabric"] .df-landing-hero h1,
:root[data-brand="dev-fabric"] .df-product-hero h1,
:root[data-brand="dev-fabric"] .df-solutions-hub-hero h1 { letter-spacing: -.055em; }
:root[data-brand="dev-fabric"] .df-product-page,
:root[data-brand="dev-fabric"] .df-landing-page { color: #f5f8f1; }
:root[data-brand="dev-fabric"] main a:focus-visible,
:root[data-brand="dev-fabric"] main button:focus-visible,
:root[data-brand="dev-fabric"] .nav a:focus-visible {
  outline: 2px solid #c3ff55 !important;
  outline-offset: 4px;
}
/* Soft entrance without layout shifts. Content stays visible if JS is unavailable. */
@media (prefers-reduced-motion: no-preference) {
  :root[data-brand="dev-fabric"] .df-reveal-ready {
    opacity: 0;
    translate: 0 25px;
    transition: opacity .75s ease, translate .75s cubic-bezier(.16,1,.3,1);
  }
  :root[data-brand="dev-fabric"] .df-reveal-ready.is-in-view {
    opacity: 1;
    translate: 0 0;
  }
}
@media (max-width: 1150px) {
  :root[data-brand="dev-fabric"] .df-hero { background-position: center, 60% center; }
  :root[data-brand="dev-fabric"] .df-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 35px;
  }
  :root[data-brand="dev-fabric"] .df-hero-copy { max-width: 790px; }
  :root[data-brand="dev-fabric"] .fa-assembly-wrap { width: min(100%, 760px); margin-inline: auto; }
}
@media (max-width: 680px) {
  :root[data-brand="dev-fabric"] .df-hero {
    min-height: 0;
    padding-top: 45px;
    padding-bottom: 52px;
    background-image:
      linear-gradient(180deg, rgba(5,8,6,.99) 0%, rgba(5,8,6,.85) 40%, rgba(5,8,6,.54) 100%),
      url('/assets/fabric-flow-v5.svg') !important;
    background-position: center, 62% bottom;
  }
  :root[data-brand="dev-fabric"] .df-hero-copy h1 {
    font-size: clamp(2.5rem, 10.5vw, 4rem) !important;
    line-height: 1.04;
    letter-spacing: -.055em;
    overflow-wrap: break-word;
  }
  :root[data-brand="dev-fabric"] .df-hero-copy h1 em { font-size: .91em; }
  :root[data-brand="dev-fabric"] .df-hero-copy .lead { margin-top: 22px; line-height: 1.7; }
  :root[data-brand="dev-fabric"] .df-hero-actions { gap: 10px; }
  :root[data-brand="dev-fabric"] .fa-assembly-wrap { min-height: 380px; padding: 0; }
  :root[data-brand="dev-fabric"] .fa-assembly-wrap::before { inset: 5% 0; border-radius: 20px; }
  :root[data-brand="dev-fabric"] .fa-assembly-wrap::after { left: 6%; top: 8%; font-size: 9px; }
  :root[data-brand="dev-fabric"] .df-ready-card,
  :root[data-brand="dev-fabric"] .df-solution-card,
  :root[data-brand="dev-fabric"] .df-landing-card { border-radius: 20px !important; }
  :root[data-brand="dev-fabric"] .site-header { backdrop-filter: blur(18px); }
}
@media (prefers-reduced-motion: reduce) {
  :root[data-brand="dev-fabric"] .df-hero::after { animation: none; }
  :root[data-brand="dev-fabric"] .df-reveal-ready { opacity: 1; translate: none; }
  :root[data-brand="dev-fabric"] .df-ready-card,
  :root[data-brand="dev-fabric"] .df-solution-card,
  :root[data-brand="dev-fabric"] .df-service-card,
  :root[data-brand="dev-fabric"] .df-landing-card { transition: none !important; }
}