
/* Homepage V2 — interactive security field + editorial expertise rows */
.hero-visual-field{
  min-height:560px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  gap:18px;
  padding:12px 0;
}
.security-field{
  position:relative;
  width:100%;
  height:490px;
  overflow:hidden;
  isolation:isolate;
  border-radius:34px;
  background:
    radial-gradient(circle at 72% 22%,rgba(23,105,255,.14),transparent 30%),
    radial-gradient(circle at 30% 72%,rgba(107,197,255,.12),transparent 27%),
    linear-gradient(145deg,rgba(247,251,255,.88),rgba(232,243,255,.52));
  box-shadow:inset 0 0 0 1px rgba(129,169,215,.18);
  cursor:crosshair;
}
.security-field:before{
  content:"";
  position:absolute;
  inset:-1px;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(90deg,var(--bg) 0,transparent 8%,transparent 92%,var(--bg) 100%);
}
.security-field:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  box-shadow:inset 0 -80px 90px -75px rgba(248,251,255,.9),inset 0 80px 90px -78px rgba(248,251,255,.9);
}
.security-field-canvas,.security-field-grid{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.security-field-canvas{z-index:0}
.security-field-grid{
  z-index:0;
  pointer-events:none;
  opacity:.7;
  background-image:
    linear-gradient(rgba(23,105,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(23,105,255,.045) 1px,transparent 1px);
  background-size:42px 42px;
  mask-image:radial-gradient(circle at center,black 15%,rgba(0,0,0,.65) 52%,transparent 88%);
}
.security-field-topline,.security-field-foot{
  position:absolute;
  left:26px;
  right:26px;
  z-index:3;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  color:#61738a;
  font-size:9px;
  line-height:1;
  letter-spacing:.15em;
  font-weight:850;
  text-transform:uppercase;
  pointer-events:none;
}
.security-field-topline{top:24px}
.security-field-foot{bottom:23px}
.security-field-topline span:last-child{color:var(--blue)}
.security-field-label{
  position:absolute;
  z-index:3;
  display:grid;
  gap:2px;
  padding-left:13px;
  pointer-events:none;
  transition:opacity .28s ease,transform .28s ease;
}
.security-field-label:before{
  content:"";
  position:absolute;
  left:0;
  top:3px;
  bottom:2px;
  width:1px;
  background:linear-gradient(var(--blue),rgba(23,105,255,.15));
}
.security-field-label span{
  color:var(--blue);
  font-size:8px;
  font-weight:900;
  letter-spacing:.16em;
}
.security-field-label b{
  color:#203650;
  font-size:11px;
  letter-spacing:.015em;
  font-weight:750;
}
.security-field-label-a{left:9%;top:27%}
.security-field-label-b{right:8%;top:42%}
.security-field-label-c{left:17%;bottom:23%}
.security-field-modes{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.security-mode{
  appearance:none;
  border:0;
  border-right:1px solid var(--line);
  background:transparent;
  color:#637287;
  min-height:54px;
  padding:0 15px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  font-size:11px;
  font-weight:780;
  letter-spacing:.01em;
  text-align:left;
  cursor:pointer;
  transition:color .2s ease,background .2s ease;
}
.security-mode:last-child{border-right:0}
.security-mode span{
  color:#91a2b6;
  font-size:8px;
  letter-spacing:.12em;
}
.security-mode:hover,.security-mode:focus-visible,.security-mode.is-active{
  color:var(--ink);
  background:rgba(255,255,255,.54);
}
.security-mode.is-active span{color:var(--blue)}

.service-ledger{
  border-top:1px solid #cbdbea;
  margin-top:12px;
}
.service-row{
  display:grid;
  grid-template-columns:56px minmax(0,1.35fr) minmax(230px,.65fr) 32px;
  gap:24px;
  align-items:center;
  min-height:178px;
  padding:26px 16px 26px 0;
  border-bottom:1px solid #cbdbea;
  position:relative;
  isolation:isolate;
  transition:background .22s ease,padding .22s ease;
}
.service-row:before{
  content:"";
  position:absolute;
  inset:0 -14px;
  background:linear-gradient(90deg,rgba(230,242,255,.76),rgba(255,255,255,.55));
  border-radius:18px;
  opacity:0;
  transform:scale(.992);
  transition:opacity .22s ease,transform .22s ease;
  z-index:-1;
}
.service-row:hover:before,.service-row:focus-visible:before{
  opacity:1;
  transform:scale(1);
}
.service-row-number{
  align-self:start;
  padding-top:5px;
  color:var(--blue);
  font-size:9px;
  font-weight:900;
  letter-spacing:.15em;
}
.service-row-main{
  min-width:0;
}
.service-row-context{
  display:block;
  color:#718198;
  font-size:10px;
  line-height:1.45;
  font-weight:780;
  letter-spacing:.07em;
  text-transform:uppercase;
  margin-bottom:10px;
}
.service-row h3{
  margin:0;
  font-size:clamp(24px,2.25vw,34px);
  line-height:1.12;
  letter-spacing:-.035em;
}
.service-row-main p{
  max-width:650px;
  margin:10px 0 0;
  color:#526176;
  font-size:14px;
}
.service-row-outcome{
  align-self:center;
  border-left:1px solid #d4e1ee;
  padding-left:23px;
}
.service-row-outcome span{
  display:block;
  color:#7e8da2;
  font-size:8px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  margin-bottom:7px;
}
.service-row-outcome p{
  margin:0;
  color:#2f4057;
  font-size:13px;
  line-height:1.5;
  font-weight:650;
}
.service-row-arrow{
  justify-self:end;
  color:var(--blue);
  font-size:20px;
  transition:transform .2s ease;
}
.service-row:hover .service-row-arrow,.service-row:focus-visible .service-row-arrow{
  transform:translate(3px,-3px);
}
.service-row-emphasis{
  background:linear-gradient(90deg,rgba(10,28,49,.018),rgba(23,105,255,.035));
}
.service-row-emphasis .service-row-context{color:#486c95}

@media (max-width:980px){
  .hero-visual-field{min-height:520px}
  .security-field{height:430px}
  .service-row{grid-template-columns:48px minmax(0,1fr) 32px;gap:17px}
  .service-row-outcome{grid-column:2/3;border-left:0;border-top:1px solid #d4e1ee;padding:15px 0 0}
  .service-row-arrow{grid-column:3;grid-row:1/3}
}
@media (max-width:680px){
  .hero-visual-field{min-height:430px;gap:12px}
  .security-field{height:350px;border-radius:24px;cursor:default}
  .security-field-topline,.security-field-foot{left:18px;right:18px;font-size:8px}
  .security-field-foot span:first-child{max-width:210px;line-height:1.35}
  .security-field-label-a{left:8%;top:28%}
  .security-field-label-b{right:5%;top:47%}
  .security-field-label-c{left:14%;bottom:24%}
  .security-field-label b{font-size:10px}
  .security-field-modes{grid-template-columns:1fr}
  .security-mode{min-height:45px;border-right:0;border-bottom:1px solid var(--line);padding-inline:5px}
  .security-mode:last-child{border-bottom:0}
  .service-row{
    grid-template-columns:34px minmax(0,1fr) 24px;
    padding:23px 0;
    min-height:0;
    gap:12px;
  }
  .service-row:before{inset:5px -9px}
  .service-row-context{font-size:9px}
  .service-row h3{font-size:25px}
  .service-row-main p{font-size:13px}
  .service-row-outcome{padding-top:13px}
}
@media (prefers-reduced-motion:reduce){
  .security-field-label,.security-mode,.service-row,.service-row:before,.service-row-arrow{transition:none}
}
