/*
  Pitrix spatial editorial layer
  Replaces boxed information architecture with continuous, dimensional product storytelling.
*/

:root{
  --spatial-blue:#168fe0;
  --spatial-cyan:#73c9ff;
  --spatial-deep:#06111b;
  --spatial-deep-2:#0a1b28;
  --spatial-surface:#edf3f7;
  --spatial-line:rgba(68,96,119,.23);
}

/* Product page / value narrative */
.product-values{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 88% 20%,rgba(22,143,224,.09),transparent 25%),
    #fff;
}
.product-values::after{
  content:"";
  position:absolute;
  right:-8vw;
  top:90px;
  width:28vw;
  height:28vw;
  border:1px solid rgba(22,143,224,.1);
  border-radius:50%;
  box-shadow:0 0 0 55px rgba(22,143,224,.018),0 0 0 110px rgba(22,143,224,.012);
  pointer-events:none;
}
.value-grid{
  margin-top:74px;
  display:grid;
  grid-template-columns:1.08fr .92fr 1fr;
  gap:clamp(32px,6vw,105px);
  border:0;
  position:relative;
  z-index:1;
}
.value-grid article{
  min-height:0;
  padding:0 0 30px;
  border:0;
  position:relative;
}
.value-grid article:nth-child(2){transform:translateY(58px)}
.value-grid article:nth-child(3){transform:translateY(14px)}
.value-grid article::before{
  content:"";
  display:block;
  width:42px;
  height:2px;
  margin-bottom:28px;
  background:var(--accent,var(--spatial-blue));
  box-shadow:72px 0 0 rgba(22,143,224,.16);
}
.value-grid i{
  position:absolute;
  right:0;
  top:-42px;
  color:rgba(22,143,224,.12);
  font-family:var(--display);
  font-size:clamp(62px,7vw,104px);
  font-weight:650;
  line-height:1;
  letter-spacing: 0;;
}
.value-grid h3{
  max-width:280px;
  margin:0 0 15px;
  font-size:clamp(21px,1.65vw,27px);
  line-height:1.34;
}
.value-grid p{max-width:350px;font-size:14px;line-height:1.9}

/* Product page / capabilities: open editorial index, not a card matrix */
.product-capabilities{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(120deg,rgba(255,255,255,.9),rgba(255,255,255,.08) 48%),
    var(--spatial-surface);
}
.product-capabilities::before{
  content:"CAPABILITIES";
  position:absolute;
  left:-.04em;
  top:175px;
  color:rgba(13,37,55,.028);
  font-family:var(--display);
  font-size:clamp(100px,17vw,270px);
  font-weight:700;
  letter-spacing: 0;;
  line-height:.8;
  pointer-events:none;
}
.capability-grid{
  margin-top:72px;
  display:grid;
  grid-template-columns:1fr 1fr;
  column-gap:clamp(55px,9vw,145px);
  row-gap:0;
  border:0;
  position:relative;
}
.capability-grid::before{
  content:"";
  position:absolute;
  left:50%;
  top:14px;
  bottom:14px;
  width:1px;
  background:linear-gradient(transparent,var(--spatial-line) 10%,var(--spatial-line) 90%,transparent);
}
.capability-grid article{
  min-height:146px;
  padding:25px 0 27px;
  display:grid;
  grid-template-columns:74px 1fr;
  gap:18px;
  border:0;
  border-bottom:1px solid var(--spatial-line);
  background:transparent;
  transition:transform .3s var(--ease),border-color .3s,color .3s;
}
.capability-grid article:nth-child(-n+2){border-top:1px solid var(--spatial-line)}
.capability-grid article:hover{
  z-index:auto;
  background:transparent;
  border-color:rgba(22,143,224,.55);
  transform:translateX(10px);
}
.capability-grid>article>span{
  color:rgba(22,143,224,.48);
  font-family:var(--display);
  font-size:32px;
  font-weight:500;
  letter-spacing: 0;;
  line-height:1;
}
.capability-grid h3{font-size:18px;line-height:1.45}
.capability-grid p{max-width:500px;margin-top:10px;font-size:14px;line-height:1.85}

/* How it works: one continuous execution signal */
.product-workflow{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 78% 22%,rgba(40,147,219,.15),transparent 28%),
    radial-gradient(circle at 20% 110%,rgba(24,91,139,.13),transparent 33%),
    var(--spatial-deep);
}
.product-workflow::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.28;
  background-image:radial-gradient(circle at 1px 1px,rgba(121,191,238,.25) 1px,transparent 0);
  background-size:36px 36px;
  mask-image:linear-gradient(90deg,transparent,black 25%,black 75%,transparent);
}
.product-workflow .shell{position:relative;z-index:1}
.workflow-track{
  margin-top:92px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(24px,4vw,70px);
  border:0;
  position:relative;
}
.workflow-track::before{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  top:17px;
  height:1px;
  background:linear-gradient(90deg,var(--spatial-blue),rgba(115,201,255,.22));
  box-shadow:0 0 22px rgba(59,175,244,.28);
}
.workflow-track article{
  min-height:210px;
  padding:0 0 0;
  display:block;
  border:0;
  position:relative;
}
.workflow-track article:nth-child(even){padding-top:58px}
.workflow-track article::before{
  content:"";
  width:11px;
  height:11px;
  display:block;
  margin:12px 0 40px;
  border:4px solid var(--spatial-deep);
  border-radius:50%;
  background:var(--spatial-cyan);
  box-shadow:0 0 0 1px rgba(115,201,255,.72),0 0 24px rgba(72,181,247,.62);
  position:relative;
  z-index:1;
}
.workflow-track article:nth-child(even)::before{margin-top:-46px;margin-bottom:98px}
.workflow-track article:not(:last-child)::after{display:none}
.workflow-track i{
  display:block;
  margin-bottom:13px;
  color:rgba(115,201,255,.55);
  font-size:14px;
  letter-spacing: 0;;
}
.workflow-track h3{margin:0 0 12px;font-size:clamp(22px,1.8vw,29px);font-weight:560}
.workflow-track p{max-width:245px;font-size:14px;line-height:1.85}

/* Product role: floating OS stack with depth */
.product-system{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 76% 48%,rgba(22,143,224,.1),transparent 28%),
    #fff;
}
.system-map{
  min-height:510px;
  padding:54px 70px;
  display:grid;
  place-items:center;
  perspective:1100px;
  background:transparent;
}
.map-line{
  width:min(100%,610px);
  padding:0;
  display:flex;
  flex-direction:column;
  border:0;
  background:none;
  transform:rotateX(54deg) rotateZ(-7deg);
  transform-style:preserve-3d;
}
.map-line>small{
  margin:0 0 18px;
  color:#71889a;
  font-size:14px;
  letter-spacing: 0;;
  transform:rotateZ(7deg) translateX(12px);
}
.map-node{
  min-height:66px;
  margin-top:-7px;
  padding:0 20px;
  display:grid;
  grid-template-columns:34px 1fr auto;
  border:1px solid rgba(61,91,115,.34);
  background:rgba(239,245,249,.83);
  box-shadow:0 18px 24px rgba(17,51,76,.08);
  backdrop-filter:blur(8px);
  transform:translateZ(0);
  transition:transform .35s var(--ease),background .35s,box-shadow .35s;
}
.map-node:nth-of-type(2){transform:translateZ(12px)}
.map-node:nth-of-type(3){transform:translateZ(24px)}
.map-node:nth-of-type(4){transform:translateZ(36px)}
.map-node:nth-of-type(5){transform:translateZ(48px)}
.map-node b{color:#435b6e;font-size:14px}
.map-node small{color:#7d91a0;font-size:14px}
.map-node em{color:var(--spatial-blue);font-size:14px;letter-spacing: 0;}
.map-node.active{
  z-index:4;
  color:#fff;
  border-color:rgba(87,187,246,.85);
  background:linear-gradient(100deg,#0b2c43,#124f76);
  box-shadow:0 26px 44px rgba(12,83,126,.3),0 0 30px rgba(49,160,225,.16);
  transform:translateZ(72px) translateX(16px);
}
.map-node.active::before{width:3px;background:var(--spatial-cyan)}
.control-plane{
  min-height:55px;
  margin-top:15px;
  padding:0 20px;
  border:0;
  border-top:2px solid var(--spatial-blue);
  color:#758c9d;
  background:rgba(223,235,243,.82);
  box-shadow:0 16px 24px rgba(16,57,87,.08);
  transform:translateZ(-14px);
}
.control-plane b{color:#38576f;font-size:14px}
.control-plane span{font-size:14px}

/* Audience and starting points: two editorial columns */
.product-fit{
  background:
    linear-gradient(90deg,transparent calc(50% - .5px),rgba(72,102,126,.18) 50%,transparent calc(50% + .5px)),
    var(--spatial-surface);
}
.fit-grid{gap:clamp(70px,11vw,180px)}
.fit-panel{padding:0;background:transparent;border:0}
.fit-panel>small{font-size:14px;letter-spacing: 0;}
.fit-panel h2{margin:24px 0 35px;font-size:clamp(31px,3vw,44px)}
.fit-panel>div{border-top:1px solid var(--spatial-line)}
.fit-panel p{
  min-height:64px;
  padding:16px 0;
  grid-template-columns:38px 1fr;
  border-color:var(--spatial-line);
  font-size:14px;
  transition:padding-left .25s var(--ease),color .25s;
}
.fit-panel p:hover{padding-left:8px;color:#203a4f}

/* Homepage / proof: an open evidence ledger */
.proof-section{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(90deg,rgba(255,255,255,.95),rgba(239,246,250,.7)),
    #f4f8fb;
}
.proof-section::after{
  content:"04";
  position:absolute;
  right:-.03em;
  bottom:-.18em;
  color:rgba(22,130,212,.035);
  font-family:var(--display);
  font-size:42vw;
  font-weight:700;
  line-height:1;
  pointer-events:none;
}
.proof-grid{position:relative;z-index:1}
.proof-list{border:0}
.proof-list article{
  min-height:118px;
  margin:0;
  padding:26px 0;
  grid-template-columns:58px 190px 1fr;
  border:0;
  border-bottom:1px solid var(--spatial-line);
  border-radius:0;
  background:transparent;
  transition:transform .3s var(--ease),border-color .3s;
}
.proof-list article:first-child{border-top:1px solid var(--spatial-line)}
.proof-list article:hover{transform:translateX(10px);border-color:rgba(22,143,224,.55)}
.proof-list span{font-size:14px}
.proof-list b{font-size:16px}

/* Homepage / services: one progressive deployment path */
.services-section{position:relative;overflow:hidden;background:#fff}
.service-track{
  margin-top:78px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(25px,4vw,64px);
  border:0;
  position:relative;
}
.service-track::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:1px;
  background:linear-gradient(90deg,var(--spatial-blue),rgba(22,143,224,.12));
}
.service-track article{
  min-height:330px;
  padding:34px 0 0;
  display:flex;
  flex-direction:column;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  overflow:visible;
}
.service-track article::before{
  content:"";
  position:absolute;
  left:0;
  top:-5px;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#fff;
  border:2px solid var(--spatial-blue);
  box-shadow:0 0 0 6px rgba(22,143,224,.08);
}
.service-track article::after{display:none}
.service-track article:hover{background:transparent;box-shadow:none;transform:translateY(-5px)}
.service-track h3{margin:72px 0 13px;font-size:clamp(28px,2.4vw,36px)}
.service-track p{max-width:260px;font-size:14px}
.service-track span{padding-top:18px;border-color:var(--spatial-line);font-size:14px}

/* Final conversion is a conclusion, not another dashboard panel. */
.final-cta{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 79% 45%,rgba(30,137,210,.15),transparent 25%),
    linear-gradient(120deg,#050a0f,#07131e 72%,#081824);
}
.final-cta::before{
  content:"";
  position:absolute;
  right:5vw;
  top:50%;
  width:430px;
  height:430px;
  border:1px solid rgba(99,184,239,.12);
  border-radius:50%;
  box-shadow:0 0 0 70px rgba(99,184,239,.025),0 0 0 140px rgba(99,184,239,.014);
  transform:translateY(-50%);
}
.final-cta .shell{position:relative;z-index:1}
.cta-scope{
  padding:0;
  overflow:visible;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.cta-scope>small{
  display:block;
  padding:0 0 18px;
  border-bottom:1px solid rgba(127,163,189,.28);
  color:var(--spatial-cyan);
  letter-spacing: 0;;
}
.cta-scope>div{
  min-height:59px;
  padding:0;
  grid-template-columns:45px 1fr;
  border:0;
  border-bottom:1px solid rgba(127,163,189,.24);
  background:transparent;
}
.cta-scope>div i{color:rgba(115,201,255,.68)}

/* Homepage / industry area: remove the giant dashboard frame */
.solutions-explorer{overflow:visible;border:0;border-radius:0}
.industry-tabs{
  padding:0;
  gap:30px;
  display:flex;
  border:0;
  border-bottom:1px solid rgba(141,170,192,.24);
  background:transparent;
}
.industry-tabs button{
  min-height:58px;
  padding:0;
  border:0;
  color:#8197a8;
  background:transparent;
  position:relative;
}
.industry-tabs button:hover,.industry-tabs button.is-active{background:transparent;color:#fff}
.industry-tabs button.is-active{box-shadow:none}
.industry-tabs button.is-active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:2px;
  background:var(--spatial-cyan);
  box-shadow:0 0 14px rgba(98,182,244,.45);
}
.industry-panel{
  padding:52px 0 0;
  background:transparent;
}
.job-grid{gap:0;border:0}
.job-card{
  min-height:112px;
  padding:22px 0;
  border:0;
  border-bottom:1px solid rgba(141,170,192,.22);
  border-radius:0;
  background:transparent;
}
.job-card:nth-child(odd){padding-right:30px}
.job-card:nth-child(even){padding-left:30px;border-left:1px solid rgba(141,170,192,.22)}
.industry-result{border:0;border-left:2px solid var(--spatial-cyan);border-radius:0;background:rgba(18,40,56,.58)}

/* Ontology's three-product structure is intentionally retained, but given depth. */
.ontology-block{
  border:1px solid rgba(51,79,100,.26);
  box-shadow:0 28px 65px rgba(15,43,63,.08);
  transform:translateZ(0);
}
.ontology-block:nth-child(2){transform:translateY(28px)}
.ontology-block:nth-child(3){transform:translateY(7px)}
.ontology-product-grid{gap:clamp(16px,2vw,30px);align-items:start}
.ontology-product-grid article{
  border:0;
  background:linear-gradient(150deg,#f7fafc,#eaf1f6);
  box-shadow:0 26px 60px rgba(17,50,74,.09);
}
.ontology-product-grid article:nth-child(2){transform:translateY(30px)}
.ontology-product-grid article:nth-child(3){transform:translateY(9px)}

@media(max-width:1180px){
  .system-map{min-height:430px;padding:25px 40px}
  .map-line{width:min(82%,610px)}
  .service-track{column-gap:35px}
}

@media(max-width:850px){
  .value-grid{gap:28px}
  .value-grid article:nth-child(2),.value-grid article:nth-child(3){transform:none}
  .value-grid i{top:-25px;font-size:70px}
  .capability-grid{grid-template-columns:1fr}
  .capability-grid::before{display:none}
  .capability-grid article:nth-child(2){border-top:0}
  .workflow-track{grid-template-columns:1fr 1fr;gap:42px 45px}
  .workflow-track::before{display:none}
  .workflow-track article,.workflow-track article:nth-child(even){min-height:0;padding:0}
  .workflow-track article::before,.workflow-track article:nth-child(even)::before{margin:0 0 26px}
  .service-track{grid-template-columns:1fr 1fr;row-gap:58px}
  .service-track::before{display:none}
  .service-track article{min-height:280px;padding-top:28px;border-top:1px solid var(--spatial-line)}
  .product-fit{background:var(--spatial-surface)}
  .fit-grid{gap:70px}
}

@media(max-width:560px){
  .value-grid{display:block;margin-top:54px}
  .value-grid article{margin-bottom:46px;padding-right:22px}
  .value-grid i{font-size:58px}
  .capability-grid{margin-top:42px}
  .capability-grid article{min-height:0;padding:22px 0;grid-template-columns:50px 1fr}
  .capability-grid>article>span{font-size:24px}
  .workflow-track{display:block;margin-top:58px;padding-left:25px}
  .workflow-track::before{display:block;left:5px;right:auto;top:6px;bottom:18px;width:1px;height:auto}
  .workflow-track article,.workflow-track article:nth-child(even){padding:0 0 44px}
  .workflow-track article::before,.workflow-track article:nth-child(even)::before{position:absolute;left:-25px;top:0;margin:0}
  .workflow-track h3{font-size:23px}
  .system-map{min-height:390px;padding:25px 5px}
  .map-line{width:94%;transform:rotateX(48deg) rotateZ(-4deg)}
  .map-node{min-height:57px;padding:0 12px;grid-template-columns:27px 1fr auto}
  .map-node.active{transform:translateZ(52px) translateX(8px)}
  .fit-grid{gap:70px}
  .proof-list article{grid-template-columns:40px 1fr;padding:23px 0}
  .proof-list p{grid-column:2}
  .service-track{grid-template-columns:1fr;row-gap:38px}
  .service-track article{min-height:250px}
  .final-cta::before{right:-220px;width:390px;height:390px}
  .industry-tabs{gap:25px;overflow:auto}
  .industry-tabs button{min-width:max-content}
  .industry-panel{padding-top:36px}
  .job-card:nth-child(odd),.job-card:nth-child(even){padding-left:0;padding-right:0;border-left:0}
  .ontology-block:nth-child(2),.ontology-block:nth-child(3),
  .ontology-product-grid article:nth-child(2),.ontology-product-grid article:nth-child(3){transform:none}
}

@media(prefers-reduced-motion:reduce){
  .value-grid article,.capability-grid article,.workflow-track article,.map-node,.proof-list article,.service-track article{transform:none!important}
}