@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;500;600;700&display=swap');

:root{
  --bg:#050505;
  --panel:#0b0b0b;
  --panel2:#101010;
  --text:#f2f0eb;
  --muted:#a7a49d;
  --gold:#d7b56a;
  --gold-soft:rgba(215,181,106,.20);
  --line:rgba(255,255,255,.11);
  --line-gold:rgba(215,181,106,.32);
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Arial,Helvetica,sans-serif;
}

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

img{max-width:100%;height:auto}

.zhova-process-wrap{
  width:min(1360px,calc(100% - 48px));
  margin:0 auto;
}

/* ---------- HERO ---------- */

.process-hero{
  min-height:680px;
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:70px;
  align-items:center;
  padding:70px 0 55px;
  position:relative;
  overflow:hidden;
}

.process-kicker,
.process-eyebrow{
  display:flex;
  align-items:center;
  gap:13px;
  color:var(--gold);
  font:700 11px/1 "Bricolage Grotesque",Arial,sans-serif;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.process-kicker:before,
.process-eyebrow:before{
  content:"";
  width:38px;
  height:1px;
  background:var(--gold);
}

.process-hero h1{
  margin:24px 0 0;
  font:700 clamp(58px,7vw,105px)/.86 "Bricolage Grotesque",Arial,sans-serif;
  letter-spacing:-.07em;
}

.outline{
  color:transparent!important;
  -webkit-text-fill-color:transparent!important;
  -webkit-text-stroke:1.3px rgba(255,255,255,.72);
  font-family:Arial,Helvetica,sans-serif!important;
  font-weight:700!important;
  text-shadow:none!important;
}

.process-hero-copy p{
  max-width:590px;
  margin:30px 0 0;
  color:var(--muted);
  font:400 17px/1.72 Arial,Helvetica,sans-serif;
}

.process-hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:28px;
}

.process-btn{
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:46px;
  padding:0 17px;
  border:1px solid var(--line);
  color:var(--text);
  background:#0a0a0a;
  font:600 11px/1 "Bricolage Grotesque",Arial,sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
  transition:.25s ease;
}

.process-btn.primary{
  border-color:var(--gold);
  background:var(--gold);
  color:#070707;
}

.process-btn:hover{
  transform:translateY(-3px);
  border-color:var(--gold);
  background:#111;
  color:var(--text);
}

.process-btn.primary:hover{
  background:#e0c07a;
  color:#050505;
}

/* ---------- HERO VISUAL ---------- */

.process-visual{
  min-height:500px;
  position:relative;
  display:grid;
  place-items:center;
}

.process-system{
  width:min(560px,100%);
  aspect-ratio:1;
  position:relative;
  display:grid;
  place-items:center;
}

.process-system:before{
  content:"";
  position:absolute;
  width:78%;
  height:78%;
  border:1px solid rgba(215,181,106,.18);
  border-radius:50%;
  transform:rotate(-18deg) scaleY(.58);
}

.process-system:after{
  content:"";
  position:absolute;
  width:58%;
  height:58%;
  border:1px solid rgba(255,255,255,.08);
  border-radius:50%;
  transform:rotate(28deg) scaleY(.48);
}

.process-core{
  position:relative;
  z-index:3;
  width:150px;
  height:150px;
  border:1px solid var(--line-gold);
  border-radius:50%;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 35% 30%,rgba(215,181,106,.2),transparent 42%),
    #0a0a0a;
  box-shadow:0 0 70px rgba(215,181,106,.09);
}

.process-core span{
  display:block;
  text-align:center;
  color:var(--gold);
  font:700 12px/1.3 "Bricolage Grotesque",Arial,sans-serif;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.process-node{
  position:absolute;
  z-index:4;
  width:126px;
  min-height:72px;
  padding:14px;
  border:1px solid var(--line);
  background:rgba(10,10,10,.92);
  backdrop-filter:blur(8px);
  transition:.25s ease;
}

.process-node strong{
  display:block;
  color:var(--text);
  font:700 14px/1.1 "Bricolage Grotesque",Arial,sans-serif;
}

.process-node small{
  display:block;
  margin-top:7px;
  color:#8f8c86;
  font:400 10px/1.35 Arial,Helvetica,sans-serif;
}

.process-node:hover{
  border-color:var(--line-gold);
  background:#111;
  transform:translateY(-5px);
}

.node-a{top:7%;left:3%}
.node-b{top:4%;right:2%}
.node-c{bottom:8%;left:1%}
.node-d{bottom:4%;right:4%}

.process-line{
  position:absolute;
  z-index:1;
  width:44%;
  height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transform-origin:center;
  opacity:.55;
}

.line-a{transform:rotate(26deg)}
.line-b{transform:rotate(-26deg)}
.line-c{transform:rotate(-151deg)}
.line-d{transform:rotate(151deg)}

/* ---------- INTRO ---------- */

.process-intro{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  display:grid;
  grid-template-columns:.7fr 1.3fr;
  gap:50px;
  padding:52px 0;
}

.process-intro h2,
.process-section-head h2,
.process-final h2{
  margin:0;
  font:700 clamp(36px,4vw,64px)/.94 "Bricolage Grotesque",Arial,sans-serif;
  letter-spacing:-.055em;
}

.process-intro-copy{
  max-width:760px;
}

.process-intro-copy p{
  margin:0;
  color:#b3b0aa;
  font:400 18px/1.7 Arial,Helvetica,sans-serif;
}

.process-intro-copy p+p{margin-top:16px}

/* ---------- PROCESS ---------- */

.process-section{
  padding:68px 0 20px;
}

.process-section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:40px;
  margin-bottom:30px;
}

.process-section-head > div:last-child{
  max-width:480px;
  color:var(--muted);
  font:400 14px/1.65 Arial,Helvetica,sans-serif;
}

.process-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}

.process-card{
  min-height:285px;
  padding:25px;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  position:relative;
  background:var(--panel);
  overflow:hidden;
  transition:.25s ease;
}

.process-card:before{
  content:"";
  position:absolute;
  width:80px;
  height:80px;
  right:-25px;
  top:-25px;
  border:1px solid rgba(215,181,106,.12);
  border-radius:50%;
  transition:.3s ease;
}

.process-card:hover{
  background:#101010;
  border-color:rgba(215,181,106,.32);
  transform:translateY(-4px);
}

.process-card:hover:before{
  width:130px;
  height:130px;
  border-color:rgba(215,181,106,.3);
}

.process-number{
  color:var(--gold);
  font:700 12px/1 "Bricolage Grotesque",Arial,sans-serif;
  letter-spacing:.1em;
}

.process-card h3{
  margin:55px 0 12px;
  color:var(--text)!important;
  font:700 26px/1 "Bricolage Grotesque",Arial,sans-serif;
  letter-spacing:-.035em;
  transition:color .2s ease;
}

.process-card:hover h3{
  color:var(--text)!important;
}

.process-card p{
  max-width:330px;
  margin:0;
  color:#9f9c95;
  font:400 14px/1.65 Arial,Helvetica,sans-serif;
}

/* ---------- DECISION FLOW ---------- */

.process-flow{
  padding:70px 0 25px;
}

.flow-shell{
  border:1px solid var(--line);
  padding:28px;
  background:
    linear-gradient(90deg,rgba(215,181,106,.035) 1px,transparent 1px),
    linear-gradient(rgba(215,181,106,.035) 1px,transparent 1px),
    #080808;
  background-size:44px 44px;
}

.flow-title{
  max-width:780px;
}

.flow-title h2{
  margin:18px 0 0;
  font:700 clamp(38px,4.6vw,70px)/.92 "Bricolage Grotesque",Arial,sans-serif;
  letter-spacing:-.06em;
}

.flow-title p{
  max-width:680px;
  margin:20px 0 0;
  color:var(--muted);
  font:400 15px/1.7 Arial,Helvetica,sans-serif;
}

.flow-track{
  margin-top:42px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1px;
  background:var(--line);
}

.flow-step{
  min-height:190px;
  padding:22px;
  background:#0b0b0b;
  transition:.25s ease;
}

.flow-step:hover{
  background:#111;
  transform:translateY(-4px);
}

.flow-step b{
  color:var(--gold);
  font:700 11px/1 "Bricolage Grotesque",Arial,sans-serif;
  letter-spacing:.12em;
}

.flow-step h3{
  margin:38px 0 9px;
  color:var(--text)!important;
  font:700 21px/1.05 "Bricolage Grotesque",Arial,sans-serif;
}

.flow-step p{
  margin:0;
  color:#929089;
  font:400 13px/1.55 Arial,Helvetica,sans-serif;
}

/* ---------- PRINCIPLES ---------- */

.process-principles{
  padding:70px 0 25px;
}

.principles-grid{
  display:grid;
  grid-template-columns:1.25fr .75fr;
  gap:1px;
  background:var(--line);
}

.principle-main,
.principle-list{
  background:#0a0a0a;
}

.principle-main{
  padding:42px;
  min-height:390px;
}

.principle-main h2{
  max-width:700px;
  margin:18px 0 0;
  font:700 clamp(40px,4.5vw,68px)/.92 "Bricolage Grotesque",Arial,sans-serif;
  letter-spacing:-.06em;
}

.principle-main p{
  max-width:620px;
  margin:24px 0 0;
  color:var(--muted);
  font:400 15px/1.7 Arial,Helvetica,sans-serif;
}

.principle-list{
  display:flex;
  flex-direction:column;
}

.principle-item{
  flex:1;
  padding:23px;
  border-bottom:1px solid var(--line);
  transition:.25s ease;
}

.principle-item:last-child{border-bottom:0}

.principle-item:hover{
  background:#111;
  padding-left:29px;
}

.principle-item strong{
  display:block;
  color:var(--text)!important;
  font:700 19px/1 "Bricolage Grotesque",Arial,sans-serif;
}

.principle-item span{
  display:block;
  margin-top:8px;
  color:#8f8c85;
  font:400 12px/1.55 Arial,Helvetica,sans-serif;
}

/* ---------- RELATED ---------- */

.process-related{
  padding:65px 0 20px;
}

.related-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:10px;
  margin-top:28px;
}

.related-card{
  min-height:145px;
  padding:20px;
  border:1px solid var(--line);
  background:#0a0a0a;
  transition:.25s ease;
}

.related-card:hover{
  background:#111;
  border-color:var(--line-gold);
  transform:translateY(-4px);
}

.related-card strong{
  display:block;
  color:var(--text)!important;
  font:700 19px/1.05 "Bricolage Grotesque",Arial,sans-serif;
}

.related-card span{
  display:block;
  margin-top:28px;
  color:var(--gold);
  font:600 10px/1 "Bricolage Grotesque",Arial,sans-serif;
  letter-spacing:.1em;
  text-transform:uppercase;
}

/* ---------- FINAL ---------- */

.process-final{
  margin:65px 0 50px;
  padding:50px;
  border:1px solid var(--line-gold);
  background:
    radial-gradient(circle at 82% 30%,rgba(215,181,106,.10),transparent 28%),
    #090909;
  position:relative;
  overflow:hidden;
}

.process-final:after{
  content:"PROCESS";
  position:absolute;
  right:-20px;
  bottom:-50px;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.07);
  font:700 150px/1 Arial,sans-serif;
  pointer-events:none;
}

.process-final h2{
  max-width:800px;
  position:relative;
  z-index:1;
}

.process-final p{
  max-width:650px;
  margin:20px 0 0;
  color:var(--muted);
  font:400 15px/1.7 Arial,Helvetica,sans-serif;
  position:relative;
  z-index:1;
}

.process-final .process-btn{
  margin-top:24px;
  position:relative;
  z-index:1;
}

/* ---------- RESPONSIVE ---------- */

@media(max-width:1050px){
  .process-hero{
    grid-template-columns:1fr;
    gap:25px;
  }

  .process-visual{min-height:430px}

  .process-grid{grid-template-columns:repeat(2,1fr)}

  .flow-track{grid-template-columns:repeat(2,1fr)}

  .related-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:760px){
  .zhova-process-wrap{
    width:min(100% - 28px,1360px);
  }

  .process-hero{
    padding:42px 0 35px;
  }

  .process-hero h1{
    font-size:clamp(52px,15vw,76px);
  }

  .process-intro{
    grid-template-columns:1fr;
    gap:20px;
    padding:38px 0;
  }

  .process-section,
  .process-flow,
  .process-principles,
  .process-related{
    padding-top:48px;
  }

  .process-section-head{
    display:block;
    margin-bottom:22px;
  }

  .process-section-head > div:last-child{
    margin-top:18px;
  }

  .process-grid,
  .flow-track{
    grid-template-columns:1fr;
  }

  .principles-grid{
    grid-template-columns:1fr;
  }

  .principle-main{
    min-height:auto;
    padding:30px;
  }

  .related-grid{
    grid-template-columns:1fr;
  }

  .process-final{
    margin:48px 0 30px;
    padding:32px 25px;
  }

  .process-final:after{
    font-size:80px;
    bottom:-15px;
  }
}

@media(max-width:520px){
  .process-visual{min-height:340px}

  .process-system{
    transform:scale(.82);
  }

  .process-core{
    width:125px;
    height:125px;
  }

  .process-node{
    width:108px;
    min-height:66px;
    padding:11px;
  }

  .process-node strong{font-size:12px}
  .process-node small{font-size:9px}

  .node-a{left:-2%}
  .node-b{right:-2%}
  .node-c{left:-3%}
  .node-d{right:-3%}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}

  .process-btn,
  .process-card,
  .process-node,
  .flow-step,
  .principle-item,
  .related-card{
    transition:none;
  }

  .process-btn:hover,
  .process-card:hover,
  .process-node:hover,
  .flow-step:hover,
  .related-card:hover{
    transform:none;
  }
}