/* TRUE VISUAL Component Library v1.0 */

/* Base system helpers */
.tv-container{width:var(--tv-container);margin:0 auto;position:relative;z-index:2}
.tv-section{position:relative;padding:var(--tv-section-space) 0}
.tv-section--paper{background:var(--tv-color-paper);color:var(--tv-color-text-dark)}
.tv-section--dark{background:linear-gradient(180deg,#090c13,#0a0d15 55%,#080b11);color:var(--tv-color-text-light)}
.tv-accent{color:var(--tv-color-violet)}

/* 01. Section intro
   Use for repeated meaning: label | heading | concise explanation.
   Typography and axes are intentionally identical everywhere. */
.tv-section-intro{
  display:grid;
  grid-template-columns:var(--tv-grid-label) minmax(0,1fr) var(--tv-grid-side);
  gap:var(--tv-grid-gap);
  align-items:start;
  margin-bottom:var(--tv-space-8);
}
.tv-section-intro__label{
  display:flex;
  align-items:center;
  gap:11px;
  padding-top:.58em;
  font-size:var(--tv-type-caption);
  line-height:1.2;
  font-weight:760;
  letter-spacing:var(--tv-tracking-caption);
  text-transform:uppercase;
  color:#70757e;
  white-space:nowrap;
}
.tv-section-intro__label:before{
  content:"";
  width:24px;
  height:1px;
  flex:0 0 auto;
  background:linear-gradient(90deg,var(--tv-color-violet),var(--tv-color-cyan));
  box-shadow:0 0 10px rgba(124,108,255,.28);
}
.tv-section-intro__title{
  margin:0;
  max-width:1180px;
  font-size:var(--tv-type-section-title);
  line-height:var(--tv-leading-tight);
  letter-spacing:var(--tv-tracking-title);
  font-weight:760;
}
.tv-section-intro__side{
  min-width:0;
  padding-left:28px;
  border-left:1px solid var(--tv-divider-light);
  font-size:var(--tv-type-body);
  line-height:var(--tv-leading-body);
  color:var(--tv-color-muted-dark);
}
.tv-section-intro__side p{margin:0}
.tv-section-intro__side > * + *{margin-top:16px}
.tv-section--dark .tv-section-intro__label,
.dark-section .tv-section-intro__label{color:#9ca5b5}
.tv-section--dark .tv-section-intro__side,
.dark-section .tv-section-intro__side{
  border-left-color:var(--tv-divider-dark);
  color:var(--tv-color-muted-light);
}

/* 02. Page hero
   Use once at the beginning of a section page. */
.tv-page-hero{
  display:grid;
  grid-template-columns:minmax(0,1.28fr) minmax(280px,.72fr);
  gap:clamp(48px,6vw,100px);
  align-items:end;
}
.tv-page-hero__main{min-width:0}
.tv-page-hero__title{
  margin:20px 0 28px;
  max-width:1120px;
  font-size:var(--tv-type-page-title);
  line-height:.94;
  letter-spacing:-.055em;
  font-weight:760;
}
.tv-page-hero__lead{
  max-width:800px;
  margin:0;
  color:var(--tv-color-muted-light);
  font-size:var(--tv-type-lead);
  line-height:1.55;
}
.tv-page-hero__side{
  padding-left:28px;
  border-left:1px solid var(--tv-divider-dark);
  color:var(--tv-color-muted-light);
  font-size:var(--tv-type-body);
  line-height:var(--tv-leading-body);
}

/* 03. Breadcrumbs */
.tv-breadcrumbs{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:9px;
  color:#98a1b1;
  font-size:13px;
  line-height:1.35;
}
.tv-breadcrumbs a{transition:color var(--tv-duration-fast) ease}
.tv-breadcrumbs a:hover{color:#fff}
.tv-breadcrumbs span[aria-current="page"]{color:#c8cfdb}

/* 04. Filter tabs */
.tv-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0 0 var(--tv-space-7);
}
.tv-tab{
  appearance:none;
  border:1px solid rgba(255,255,255,.11);
  background:rgba(255,255,255,.035);
  color:#aeb6c5;
  min-height:42px;
  padding:0 16px;
  border-radius:var(--tv-radius-pill);
  cursor:pointer;
  font:600 14px/1 var(--tv-font-sans);
  transition:color var(--tv-duration-fast) ease,border-color var(--tv-duration-fast) ease,background var(--tv-duration-fast) ease,box-shadow var(--tv-duration-fast) ease;
}
.tv-tab:hover{color:#fff;border-color:rgba(139,89,251,.35)}
.tv-tab.is-active{
  color:#fff;
  border-color:rgba(139,89,251,.50);
  background:rgba(139,89,251,.12);
  box-shadow:0 0 20px rgba(139,89,251,.09);
}
.tv-section--paper .tv-tab{
  border-color:rgba(17,19,24,.12);
  background:rgba(17,19,24,.025);
  color:#626a77;
}
.tv-section--paper .tv-tab:hover,
.tv-section--paper .tv-tab.is-active{color:#17191e}

/* 05. Reusable card */
.tv-card{
  position:relative;
  overflow:hidden;
  border:1px solid var(--tv-border-dark);
  border-radius:var(--tv-radius-lg);
  background:rgba(255,255,255,.035);
  box-shadow:var(--tv-shadow-card);
}
.tv-card__body{padding:28px}
.tv-card__eyebrow{
  display:block;
  margin-bottom:14px;
  color:var(--tv-color-violet-soft);
  font-size:12px;
  line-height:1.2;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-weight:760;
}
.tv-card__title{
  margin:0 0 12px;
  font-size:var(--tv-type-card-title);
  line-height:1.03;
  letter-spacing:-.04em;
}
.tv-card__text{
  margin:0;
  color:var(--tv-color-muted-light);
  font-size:16px;
  line-height:1.58;
}
.tv-section--paper .tv-card{
  border-color:var(--tv-border-light);
  background:rgba(255,255,255,.52);
  box-shadow:0 18px 42px rgba(21,22,25,.07);
}
.tv-section--paper .tv-card__text{color:var(--tv-color-muted-dark)}

/* 06. CTA row */
.tv-actions{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin-top:30px}

/* 07. Catalog grid */
.tv-catalog-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:28px;
}

/* 08. Content lead */
.tv-content-lead{
  margin:0;
  max-width:800px;
  font-size:var(--tv-type-lead);
  line-height:1.52;
  color:inherit;
}

/* Responsive behavior */
@media(max-width:1100px){
  .tv-section-intro{
    grid-template-columns:1fr;
    gap:22px;
    margin-bottom:48px;
  }
  .tv-section-intro__label{padding-top:0}
  .tv-section-intro__side{
    max-width:760px;
  }
  .tv-page-hero{grid-template-columns:1fr;gap:32px}
  .tv-page-hero__side{max-width:760px}
}
@media(max-width:760px){
  .tv-section-intro{gap:18px;margin-bottom:36px}
  .tv-section-intro__side{padding-left:18px}
  .tv-page-hero__side{padding-left:18px}
  .tv-catalog-grid{grid-template-columns:1fr}
  .tv-tabs{gap:8px}
  .tv-tab{min-height:40px;padding:0 14px;font-size:13px}
}


/* 09. Homepage section navigator v5 - platform physics
   Grid: 10 content + 1 empty buffer + 1 navigation.
   A single energy sphere rests on section platforms.
   During section transition the current platform tips, the sphere falls with gravity,
   bounces on the next platform and settles. Scrolling backward reverses the same timeline. */

:root{
  --home-grid-gap:clamp(16px,1.15vw,24px);
  --home-rail-left:calc(100vw - 118px);
  --home-rail-width:96px;
}

@media(min-width:1100px){
  body[data-page="home"] .home-slide > .container{
    display:grid;
    grid-template-columns:repeat(12,minmax(0,1fr));
    column-gap:var(--home-grid-gap);
  }
  body[data-page="home"] .home-slide > .container > *{
    grid-column:1 / span 10;
    min-width:0;
  }
}

@media(max-width:1099px){
  body[data-page="home"] .home-slide > .container{display:block}
}

.home-slide{scroll-margin-top:92px}

.home-rail{
  --ball-y:24px;
  --ball-x:0px;
  --ball-scale-x:1;
  --ball-scale-y:1;
  --ball-glow:.45;
  --trail-top:0px;
  --trail-height:0px;
  --rail-pointer-y:50%;

  /* dark section defaults */
  --rail-text:#858fa1;
  --rail-text-soft:#616c7e;
  --rail-text-strong:#f0f3f9;
  --rail-track:rgba(211,221,239,.14);
  --rail-platform:rgba(208,219,238,.34);
  --rail-platform-active:rgba(221,230,246,.72);

  position:fixed;
  left:var(--home-rail-left);
  top:50%;
  z-index:1200;
  width:var(--home-rail-width);
  height:clamp(286px,43vh,348px);
  transform:translate3d(12px,-50%,0);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:
    opacity .30s var(--tv-ease),
    transform .38s var(--tv-ease),
    visibility 0s linear .38s,
    color .25s ease;
}

.home-rail.theme-light{
  --rail-text:#687180;
  --rail-text-soft:#99a1ae;
  --rail-text-strong:#171c25;
  --rail-track:rgba(24,31,44,.16);
  --rail-platform:rgba(35,43,58,.30);
  --rail-platform-active:rgba(25,32,45,.68);
}

.home-rail.theme-dark{
  --rail-text:#8791a3;
  --rail-text-soft:#5f6a7c;
  --rail-text-strong:#f0f3f9;
  --rail-track:rgba(211,221,239,.14);
  --rail-platform:rgba(208,219,238,.34);
  --rail-platform-active:rgba(221,230,246,.72);
}

.home-rail.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate3d(0,-50%,0);
  transition-delay:0s;
}

.home-rail__shell{
  position:relative;
  width:100%;
  height:100%;
}

.home-rail__shell:before{
  content:"";
  position:absolute;
  right:-18px;
  top:50%;
  width:106px;
  height:82%;
  transform:translateY(-50%);
  border-radius:52px;
  background:
    radial-gradient(circle at 76% var(--rail-pointer-y),rgba(139,89,251,.095),transparent 28%),
    linear-gradient(90deg,transparent,rgba(82,214,255,.012));
  pointer-events:none;
}

.home-rail__ambient{
  position:absolute;
  right:-34px;
  top:var(--rail-pointer-y);
  width:120px;
  height:120px;
  border-radius:50%;
  transform:translateY(-50%);
  background:radial-gradient(circle,rgba(139,89,251,.12),rgba(82,214,255,.035) 44%,transparent 72%);
  filter:blur(14px);
  pointer-events:none;
  transition:top .11s linear;
}

/* Extremely quiet trajectory line. Platforms are the primary metaphor. */
.home-rail__track{
  position:absolute;
  top:12px;
  bottom:12px;
  right:18px;
  width:12px;
  pointer-events:none;
}
.home-rail__track-base{
  position:absolute;
  left:50%;
  top:0;
  bottom:0;
  width:1px;
  transform:translateX(-50%);
  background:linear-gradient(
    180deg,
    transparent,
    var(--rail-track) 10%,
    var(--rail-track) 90%,
    transparent
  );
}
.home-rail__fall-trail{
  position:absolute;
  left:50%;
  top:var(--trail-top);
  width:1px;
  height:var(--trail-height);
  transform:translateX(-50%);
  border-radius:999px;
  background:linear-gradient(
    180deg,
    rgba(139,89,251,.08),
    rgba(139,89,251,.70) 42%,
    rgba(82,214,255,.72)
  );
  box-shadow:0 0 8px rgba(139,89,251,.24),0 0 16px rgba(82,214,255,.10);
  opacity:.76;
}

/* One sphere for the entire navigator. */
.home-rail__ball{
  position:absolute;
  right:18px;
  top:var(--ball-y);
  z-index:6;
  width:12px;
  height:12px;
  border-radius:50%;
  transform:
    translate(calc(50% + var(--ball-x)),-100%)
    scale(var(--ball-scale-x),var(--ball-scale-y));
  transform-origin:50% 100%;
  background:
    radial-gradient(circle at 32% 27%,#c8c0ff 0 8%,#a37cff 18%,#765cf4 42%,#42bddf 72%,#162032 100%);
  border:1px solid rgba(111,95,230,.42);
  box-shadow:
    0 0 calc(8px + 10px * var(--ball-glow)) rgba(139,89,251,.50),
    0 0 calc(10px + 15px * var(--ball-glow)) rgba(82,214,255,.16),
    0 4px 8px rgba(0,0,0,.20);
  will-change:top,transform;
}
.home-rail__ball:before{
  content:"";
  position:absolute;
  left:2px;
  top:2px;
  width:3px;
  height:3px;
  border-radius:50%;
  background:rgba(229,225,255,.64);
  filter:blur(.15px);
}
.home-rail__ball:after{
  content:"";
  position:absolute;
  inset:-5px;
  border-radius:50%;
  border:1px solid rgba(139,89,251,.14);
  opacity:calc(.28 + .42 * var(--ball-glow));
}

.home-rail__items{
  position:absolute;
  inset:6px 0;
  display:grid;
  grid-template-rows:repeat(6,1fr);
  z-index:2;
}
.home-rail__item{
  position:relative;
  display:flex;
  align-items:center;
  min-height:38px;
  padding-right:22px;
  outline:none;
}

/* Label is independent of platform physics. */
.home-rail__label{
  width:calc(100% - 18px);
  display:grid;
  grid-template-columns:20px minmax(0,1fr);
  align-items:center;
  gap:5px;
  min-width:0;
  padding:5px 4px;
  color:var(--rail-text);
  transform:translateX(0);
  transition:color .20s ease,opacity .20s ease,transform .22s var(--tv-ease),text-shadow .20s ease;
}
.home-rail__label b{
  font-size:8px;
  line-height:1;
  letter-spacing:.10em;
  color:var(--rail-text-soft);
  font-weight:800;
  transition:color .20s ease;
}
.home-rail__label span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:10px;
  line-height:1;
  font-weight:650;
  letter-spacing:-.015em;
}

/* Physical shelf/platform.
   Pivot is on the right, the sphere rests near that pivot.
   Released shelves rotate downward so gravity and the falling ball read coherently. */
.home-rail__platform{
  --platform-angle:0deg;
  --platform-impact:0;
  --platform-energy:0;
  position:absolute;
  right:3px;
  top:50%;
  width:30px;
  height:2px;
  border-radius:999px;
  transform-origin:100% 50%;
  transform:translateY(5px) rotate(var(--platform-angle));
  background:linear-gradient(
    90deg,
    rgba(139,89,251,.22),
    var(--rail-platform) 64%,
    var(--rail-platform-active)
  );
  box-shadow:
    0 0 calc(2px + 9px * var(--platform-energy)) rgba(139,89,251,.24),
    0 0 calc(2px + 12px * var(--platform-impact)) rgba(82,214,255,.24);
  opacity:calc(.52 + .36 * var(--platform-energy));
  transition:opacity .16s ease;
  will-change:transform,box-shadow;
}
.home-rail__platform:before{
  content:"";
  position:absolute;
  right:-2px;
  top:50%;
  width:5px;
  height:5px;
  border-radius:50%;
  transform:translate(50%,-50%);
  background:rgba(139,89,251,.34);
  box-shadow:0 0 7px rgba(139,89,251,.20);
}
.home-rail__platform:after{
  content:"";
  position:absolute;
  right:-10px;
  top:50%;
  width:20px;
  height:20px;
  border-radius:50%;
  transform:translate(50%,-50%) scale(calc(.72 + .28 * var(--platform-impact)));
  background:radial-gradient(circle,rgba(82,214,255,.20),rgba(139,89,251,.08) 34%,transparent 70%);
  opacity:var(--platform-impact);
  pointer-events:none;
}

.home-rail:not(:hover):not(:focus-within) .home-rail__item:not(.is-active) .home-rail__label{opacity:.56}

.home-rail__item.is-active .home-rail__label{
  color:var(--rail-text-strong);
  transform:translateX(-2px);
  text-shadow:0 0 16px rgba(139,89,251,.12);
}
.home-rail__item.is-active .home-rail__label b{
  color:var(--tv-color-violet);
  text-shadow:0 0 10px rgba(139,89,251,.22);
}

.home-rail__item.is-active .home-rail__platform{
  --platform-energy:1;
}

.home-rail__item.is-released .home-rail__platform{
  --platform-angle:-84deg;
  --platform-energy:.16;
  opacity:.42;
}

.home-rail:hover .home-rail__item .home-rail__label,
.home-rail:focus-within .home-rail__item .home-rail__label{opacity:1!important}

.home-rail__item:hover .home-rail__label,
.home-rail__item:focus-visible .home-rail__label{
  color:var(--rail-text-strong);
  transform:translateX(-2px);
}
.home-rail__item:hover .home-rail__platform,
.home-rail__item:focus-visible .home-rail__platform{
  --platform-energy:.75;
}

@media(min-width:1100px) and (max-width:1279px){
  :root{--home-grid-gap:14px}
  .home-rail{height:282px}
  .home-rail__label{
    grid-template-columns:17px minmax(0,1fr);
    gap:3px;
    padding-left:2px;
    padding-right:2px;
  }
  .home-rail__label b{font-size:7px}
  .home-rail__label span{font-size:9px}
  .home-rail__platform{width:25px}
}

@media(max-width:1099px){
  .home-rail{display:none!important}
}

@media(prefers-reduced-motion:reduce){
  .home-rail,
  .home-rail__label,
  .home-rail__platform,
  .home-rail__ball,
  .home-rail__fall-trail{transition:none!important}
}


/* Homepage rail - active label can expand into the intentionally empty buffer column. */
@media(min-width:1280px){
  .home-rail__item.is-active .home-rail__label{
    width:calc(100% + 54px);
    transform:translateX(-54px);
    grid-template-columns:22px minmax(0,1fr);
    gap:7px;
  }
  .home-rail__item.is-active .home-rail__label b{
    font-size:9px;
  }
  .home-rail__item.is-active .home-rail__label span{
    font-size:13px;
    font-weight:760;
    letter-spacing:-.025em;
    overflow:visible;
    text-overflow:clip;
  }
}

@media(min-width:1100px) and (max-width:1279px){
  .home-rail__item.is-active .home-rail__label{
    width:calc(100% + 34px);
    transform:translateX(-34px);
  }
  .home-rail__item.is-active .home-rail__label span{
    font-size:11px;
    font-weight:760;
  }
}


/* TRUE VISUAL v7.12.4 - home rail has no cursor-following ambient glow. */
.home-rail__shell:before,
.home-rail__ambient{
  display:none!important;
}


/* TRUE VISUAL filter tabs - stable geometry + top-navigation light language. */
body[data-page="materials"] .tv-tabs{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:30px;
  margin-bottom:52px;
  padding-bottom:0;
  border-bottom:1px solid rgba(17,19,24,.08);
}
body[data-page="materials"] .tv-tab{
  position:relative;
  isolation:isolate;
  flex:0 0 auto;
  min-height:54px;
  padding:0 3px 17px;
  border:0;
  border-radius:0;
  background:transparent;
  color:#1d2128;
  box-shadow:none;
  font-size:15px;
  font-weight:760;
  letter-spacing:-.012em;
  white-space:nowrap;
  transition:color .22s ease,opacity .22s ease;
}
/* Soft reflected light from the active underline. */
body[data-page="materials"] .tv-tab:before{
  content:"";
  position:absolute;
  z-index:-1;
  left:5%;
  right:5%;
  bottom:-13px;
  height:34px;
  pointer-events:none;
  background:radial-gradient(ellipse at 50% 0%,rgba(139,89,251,.13) 0%,rgba(82,214,255,.07) 34%,rgba(82,214,255,0) 72%);
  filter:blur(7px);
  opacity:0;
  transform:scaleX(.70);
  transform-origin:center top;
  transition:opacity .22s ease,transform .24s var(--tv-ease);
}
/* Branded line fades fully to transparency at both edges, as in the header navigation. */
body[data-page="materials"] .tv-tab:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;
  border-radius:999px;
  pointer-events:none;
  background:linear-gradient(90deg,
    rgba(139,89,251,0) 0%,
    rgba(139,89,251,.92) 24%,
    rgba(82,214,255,.88) 76%,
    rgba(82,214,255,0) 100%);
  box-shadow:0 0 12px rgba(139,89,251,.16);
  opacity:0;
  transform:scaleX(.55);
  transform-origin:center;
  transition:opacity .22s ease,transform .24s var(--tv-ease);
}
body[data-page="materials"] .tv-tab:hover{
  color:#0e1117;
  border:0;
  background:transparent;
}
body[data-page="materials"] .tv-tab:hover:before{
  opacity:.42;
  transform:scaleX(.86);
}
body[data-page="materials"] .tv-tab:hover:after{
  opacity:.62;
  transform:scaleX(.84);
}
body[data-page="materials"] .tv-tab.is-active{
  color:#0e1117;
  border:0;
  background:transparent;
  box-shadow:none;
  /* Same weight as inactive tabs: active state must never change tab width. */
  font-weight:760;
}
body[data-page="materials"] .tv-tab.is-active:before{
  opacity:.72;
  transform:scaleX(1);
}
body[data-page="materials"] .tv-tab.is-active:after{
  opacity:1;
  transform:scaleX(1);
}
@media(max-width:700px){
  body[data-page="materials"] .tv-tabs{gap:18px;margin-bottom:34px}
  body[data-page="materials"] .tv-tab{font-size:14px;min-height:48px;padding-bottom:14px}
}