.security-page { background: #fff; }
.security-page .site-header { background: #fff; }
.security-hero { position: relative; isolation: isolate; overflow: hidden; background: #f7f9fa; }
.security-hero__art { position: absolute; z-index: -1; inset: 0; width: 100%; background: linear-gradient(90deg, #ffffffed, #ffffffb3 32%, transparent 57%), url('../images/security-hero.png') center 58% / cover no-repeat; }
.security-hero__inner { padding-block: 48px 42px; min-height: 570px; }
.security-hero .eyebrow { margin-bottom: 12px; }
.security-hero h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(36px, 4.3vw, 62px); line-height: 1.4; letter-spacing: .02em; margin: 0 0 18px; }
.security-hero__lead { font-size: clamp(16px, 1.6vw, 21px); margin: 0 0 22px; }
.security-hero__signature { border-left: 2px solid var(--orange); padding-left: 20px; margin: 28px 0 0; font-family: var(--english); font-size: 21px; line-height: 1.25; color: #4d5661; }
.security-section { padding-top: clamp(56px, 6vw, 88px); }
.security-heading { display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 44px; margin-bottom: 38px; }
.security-kicker { display: flex; align-items: center; gap: 20px; margin: 0; font-size: 12px; letter-spacing: .15em; color: #58626b; font-weight: 500; }
.security-kicker > span, .security-feature__number { font-family: var(--english); color: #e76513; font-size: 28px; line-height: 1.4; letter-spacing: 0; }
.security-page h2 { font-family: var(--serif); font-size: clamp(28px, 3vw, 42px); font-weight: 600; line-height: 1.4; margin: 0; }
.security-heading > p { border-left: 1px solid #d9dde1; padding-left: 30px; margin: 0; color: #53606b; font-size: 16px; line-height: 1.9; }
.security-comparison { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.security-method { border: 1px solid #e4e7ea; border-radius: 10px; overflow: hidden; background: linear-gradient(#fff, #f8f9fa); }
.security-method > h3 { background: linear-gradient(100deg, #606c77, #7d8790); color: #fff; font-size: 22px; line-height: 1.5; padding: 10px 24px; margin: 0; }
.security-method--weria { border-color: #f7dfcb; background: linear-gradient(#fff, #fffaf5); }
.security-method--weria > h3 { background: linear-gradient(100deg, #f76a08, #ff943e); }
.security-method__body { padding: 16px; }
.security-method__body > p { margin: 0; font-size: 14px; min-height: 76px; }
.security-flow { display: grid; grid-template-columns: 1fr .8fr 1.35fr .8fr 1fr; align-items: center; gap: 6px; min-height: 180px; margin-block: 8px 16px; }
.security-flow b, .security-flow small { display: block; font-size: 11px; line-height: 1.5; text-align: center; }
.security-window { border: 1px solid #c6cdd3; border-radius: 5px; padding: 18px 5px 6px; position: relative; background: #fff; box-shadow: 0 2px 3px #26374610; }
.security-window::before { content: '•••'; position: absolute; inset: 0 0 auto; height: 13px; background: #d2d9de; color: #87959e; font-size: 11px; line-height: 10px; padding-left: 5px; border-radius: 4px 4px 0 0; }
.security-window__mock { height: 48px; margin-top: 12px; background: linear-gradient(140deg, transparent 45%, #79b78b 46% 65%, transparent 66%), linear-gradient(40deg, #a1d5a4 45%, transparent 46%), #a6d9ee; border-radius: 3px; border-right: 20px solid #e1e6e9; }
.security-flow__arrow { text-align: center; color: #6a7783; }
.security-flow__arrow span { display: block; font-size: 34px; line-height: 1; }
.security-flow__arrow small { font-size: 10px; color: #303a43; }
.security-method--weria .security-flow__arrow { color: #ee751d; }
.security-server { padding: 14px 10px; border-radius: 6px; background: #eef0f2; }
.security-server i { display: block; height: 22px; border-radius: 5px; margin-top: 5px; background: linear-gradient(100deg, #52626f, #89949e); }
.security-server i::before { content: '••'; color: #fff; font-style: normal; padding-left: 9px; }
.security-browser { border: 1px solid #f3bc8a; border-radius: 7px; overflow: hidden; text-align: center; background: #fff; }
.security-browser > strong { display: block; background: #f97613; color: #fff; font-size: 11px; padding: 4px 2px; }
.security-browser > b { padding: 10px 2px; font-size: 12px; }
.security-browser > span { display: block; font-size: 25px; color: #2c7bb6; padding-bottom: 8px; font-weight: 700; }
.security-browser em { font-size: 18px; color: #b59b81; font-style: normal; }
.security-points { border: 1px solid #f3e6dc; border-radius: 7px; overflow: hidden; }
.security-points h4 { margin: 0; background: #fff1e5; color: #c9530b; font-size: 16px; padding: 8px 14px; }
.security-points ol { counter-reset: points; list-style: none; padding: 12px 14px; margin: 0; display: grid; gap: 12px; }
.security-points li { counter-increment: points; display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.6; }
.security-points li::before { content: counter(points); flex: 0 0 23px; height: 23px; border-radius: 50%; background: #ed6b0b; color: #fff; text-align: center; font-weight: 600; }
.security-points small { display: block; font-size: 12px; line-height: 1.7; color: #59616a; }
.security-points__title { display: flex; align-items: center; gap: 12px; }
.security-point-icon { display: block; width: 30px; height: 30px; flex: 0 0 30px; color: #424b53; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.security-point-icon--shield { width: 32px; height: 32px; flex-basis: 32px; color: #ed6b0b; }
.security-point-icon--prohibited { color: #d92332; }
.security-points li > div { min-width: 0; }
.security-points--muted { border-color: #e3e6e9; }
.security-points--muted h4 { background: #e9ecef; color: #45515c; }
.security-points--muted li::before { background: #67747f; }
.security-points--muted ol { gap: 23px; padding-block: 23px; }
.security-features { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.security-feature { border: 1px solid #ebedf0; border-radius: 7px; padding: 13px; box-shadow: 0 2px 8px #122e4610; }
.security-feature h3 { font-size: 14px; margin: 2px 0 10px; line-height: 1.6; min-height: 45px; }
.security-photo { display: block; border-radius: 6px; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.security-use-cases .security-photo { aspect-ratio: 5 / 4; }
.security-feature p { font-size: 13px; line-height: 1.8; margin: 12px 0 0; }
.security-use-cases { display: grid; grid-template-columns: 1fr 1.8fr; gap: 38px; align-items: center; padding-bottom: clamp(56px, 6vw, 88px); }
.security-use-cases h2 { font-size: clamp(23px, 2.2vw, 30px); }
.security-use-cases ul { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 9px; list-style: none; margin: 0; padding: 0; }
.security-use-cases li { text-align: center; }
.security-use-cases li > span { display: block; font-size: 11px; line-height: 1.6; margin-top: 7px; }
@media (max-width: 1100px) {
  .security-hero__inner { min-height: 500px; }
  .security-heading { gap: 24px; }
  .security-method > h3 { font-size: 18px; padding-inline: 16px; }
  .security-features { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .security-feature h3 { min-height: 0; font-size: 16px; }
  .security-feature p { font-size: 14px; }
  .security-use-cases { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .security-hero__inner { padding-block: 34px 280px; min-height: 0; }
  .security-hero__art { width: 100%; height: 300px; top: auto; background-image: url('../images/security-hero.png'); background-size: cover; background-position: right center; mask-image: linear-gradient(#0000, #000 20%); }
  .security-hero h1 { font-size: clamp(29px, 6.8vw, 44px); }
  .security-hero__lead { font-size: 15px; }
  .security-hero__signature { font-size: 17px; margin-top: 20px; }
  .security-hero .button { padding-inline: 18px; gap: 12px; }
  .security-heading { grid-template-columns: 1fr; gap: 24px; margin-bottom: 28px; }
  .security-heading > p { padding-left: 16px; font-size: 14px; }
  .security-heading > p br { display: none; }
  .security-comparison { grid-template-columns: 1fr; gap: 20px; }
  .security-method__body > p { min-height: 0; }
  .security-features { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .security-feature { padding: 12px; }
  .security-feature h3 { font-size: 14px; min-height: 45px; }
  .security-use-cases ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 12px; }
  .security-use-cases { gap: 28px; }
  .security-use-cases li > span { font-size: 12px; }
}
@media (max-width: 380px) {
  .security-points:not(.security-points--muted) li { gap: 8px; }
  .security-points li .security-point-icon { width: 25px; height: 25px; flex-basis: 25px; }
  .security-method__body { padding: 10px; }
  .security-flow { gap: 3px; }
  .security-flow b, .security-flow small, .security-browser > strong { font-size: 9px; }
  .security-server { padding-inline: 5px; }
}