/* DashAI /security/ (10.11.2026). Calm, serious, technical: deep navy frames, mono labels, one closed-loop diagram. */
.sec main { padding-bottom: 0; }
.sh, .tech, .sclose { position: relative; isolation: isolate; overflow: hidden; margin: 14px; border-radius: 26px; color: #fff;
  background: radial-gradient(70% 90% at 85% 0%, rgb(0 109 170 / .38), transparent 60%), radial-gradient(60% 70% at 0% 100%, rgb(0 109 170 / .18), transparent 60%), linear-gradient(180deg, #071a2d, #0b2440); }
.sh::before, .tech::before, .sclose::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: linear-gradient(rgb(127 196 255 / .07) 1px, transparent 1px), linear-gradient(90deg, rgb(127 196 255 / .07) 1px, transparent 1px); background-size: 56px 56px; background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 85%); mask-image: radial-gradient(120% 90% at 50% 0%, #000 30%, transparent 85%); }

/* hero */
.sh { min-height: min(86svh, 820px); display: grid; grid-template-rows: 1fr auto; }
.sh__in { align-self: center; padding: clamp(70px, 10vh, 120px) clamp(24px, 5vw, 80px) 40px; max-width: 1100px; }
.sh__crumb { margin: 0 0 26px; font: 500 13px/1 var(--mono); letter-spacing: .08em; color: rgb(255 255 255 / .6); }
.sh__crumb a { color: rgb(255 255 255 / .8); text-decoration: none; }
.sh h1 { margin: 0; font: 800 clamp(44px, 5.4vw, 92px)/1.04 var(--he); letter-spacing: -0.025em; text-wrap: balance; }
.sh__k { display: block; }
.sh__l { display: block; color: #9fd3ff; }
.sh__lead { margin: 28px 0 0; max-width: 46ch; font: 400 clamp(18px, 1.5vw, 22px)/1.6 var(--he); color: rgb(255 255 255 / .86); }
.sh .ctas { margin-top: 34px; }
.sh__ctl { list-style: none; margin: 0; padding: 16px clamp(24px, 5vw, 80px) 20px; display: flex; flex-wrap: wrap; gap: 10px 26px; direction: ltr; justify-content: flex-end;
  border-top: 1px solid rgb(255 255 255 / .14); background: linear-gradient(180deg, rgb(6 20 38 / 0), rgb(6 20 38 / .35)); }
.sh__ctl li { display: inline-flex; align-items: center; gap: 9px; font: 500 11.5px/1 var(--mono); letter-spacing: .1em; color: rgb(255 255 255 / .82); white-space: nowrap; }

/* sections on the canvas */
.spec, .fears, .ai, .ctl, .never { padding: clamp(80px, 12vh, 140px) var(--gap) 0; }
.spec h2, .fears h2, .ai h2, .ctl h2, .never h2 { font-size: clamp(36px, 4.2vw, 68px); }
.spec__grid { margin: 40px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--line); }
.spec__grid div { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 20px; padding: 20px 4px; border-bottom: 1px solid var(--line); }
.spec__grid div:nth-child(odd) { border-inline-end: 1px solid var(--line); padding-inline-end: 28px; }
.spec__grid div:nth-child(even) { padding-inline-start: 28px; }
.spec__grid dt { font: 700 16px/1.4 var(--he); color: var(--ink); }
.spec__grid dd { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink-2); }

.fears__cols { margin-top: 44px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(20px, 3vw, 44px); }
.fears__col h3 { margin: 0 0 16px; font: 700 15px/1 var(--he); color: var(--ink-3); letter-spacing: .02em; }
.fears__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.fear { position: relative; padding: 22px 22px 20px; border-radius: 18px; background: var(--card); box-shadow: 0 0 0 1px var(--line), 0 18px 40px -30px rgb(14 29 44 / .45); }
.fear__tag { display: inline-block; margin-bottom: 12px; padding: 5px 8px; border-radius: 7px; background: #eef4fa; color: #005b8f; font: 500 10.5px/1 var(--mono); letter-spacing: .1em; direction: ltr; }
.fear q { display: block; font: 700 clamp(19px, 1.6vw, 23px)/1.35 var(--he); color: var(--ink); quotes: '"' '"'; }
.fear p { margin: 10px 0 0; font-size: 16.5px; line-height: 1.6; color: var(--ink-2); }

/* the closed loop */
.tech { margin-top: clamp(80px, 12vh, 140px); }
.tech__in { padding: clamp(60px, 9vh, 110px) clamp(24px, 4.5vw, 72px); }
.tech h2 { color: #fff; font-size: clamp(38px, 4.6vw, 76px); }
.tech__k { color: #9fd3ff; }
.tech__lead { margin: 18px 0 0; max-width: 62ch; font-size: clamp(17px, 1.3vw, 20px); color: rgb(255 255 255 / .82); }
.loop { margin: 48px 0 0; }
.loop__flow { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; gap: 34px; }
.loop__flow > li { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 18px; border-radius: 16px; min-width: 0;
  background: rgb(255 255 255 / .05); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12); }
.loop__flow > li:not(:last-child)::after { content: ""; position: absolute; inset-block-start: 50%; inset-inline-end: -30px; width: 26px; height: 2px; transform: translateY(-50%);
  background: repeating-linear-gradient(90deg, #7fc4ff 0 6px, transparent 6px 11px); background-size: 22px 2px; animation: flow 1.6s linear infinite; }
@keyframes flow { to { background-position: -22px 0; } }
.loop__flow b { font: 700 16px/1.3 var(--he); color: #fff; }
.loop__flow span { font: 500 11px/1.45 var(--mono); letter-spacing: .06em; color: rgb(255 255 255 / .62); }
.loop__node { flex: 0 1 150px; }
.loop__gate { flex: 0 1 150px; background: rgb(0 109 170 / .18) !important; box-shadow: inset 0 0 0 1px rgb(127 196 255 / .35) !important; }
.loop__vault { flex: 1 1 auto; padding: 18px 18px 14px !important; background: rgb(127 196 255 / .06) !important; box-shadow: 0 0 0 1.5px rgb(127 196 255 / .55), 0 0 40px -6px rgb(0 109 170 / .55) !important;
  outline: 1px dashed rgb(127 196 255 / .5); outline-offset: 7px; border-radius: 18px !important; }
.loop__vh { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; padding-bottom: 12px; border-bottom: 1px solid rgb(255 255 255 / .12); }
.loop__svc { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.loop__svc li { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border-radius: 12px; background: rgb(255 255 255 / .06); }
.loop__svc b { font: 600 12.5px/1.2 var(--mono) !important; letter-spacing: .02em; direction: ltr; text-align: right; color: #cfe8ff !important; }
.loop__svc span { font: 400 13.5px/1.45 var(--he) !important; letter-spacing: 0 !important; color: rgb(255 255 255 / .78) !important; }
.loop figcaption { margin-top: 18px; font: 500 12.5px/1.5 var(--mono); letter-spacing: .04em; color: rgb(255 255 255 / .58); }
.tech__h3 { margin: 64px 0 18px; font: 700 clamp(22px, 2vw, 28px)/1.3 var(--he); color: #fff; }
.steps6 { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; }
.steps6 li { counter-increment: s; position: relative; padding: 16px 16px 16px 16px; padding-inline-start: 58px; border-radius: 14px; background: rgb(255 255 255 / .05); font-size: 16.5px; line-height: 1.6; color: rgb(255 255 255 / .86); }
.steps6 li::before { content: counter(s, decimal-leading-zero); position: absolute; inset-inline-start: 16px; inset-block-start: 17px; font: 600 14px/1 var(--mono); color: #7fc4ff; }

/* AI, precise */
.ai__lead { margin: 16px 0 0; max-width: 60ch; font-size: clamp(17px, 1.3vw, 20px); color: var(--ink-2); }
.ai__grid { margin: 36px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ai__grid div { padding: 20px; border-radius: 16px; background: var(--card); box-shadow: 0 0 0 1px var(--line); }
.ai__grid dt { font: 700 17px/1.3 var(--he); color: var(--ink); }
.ai__grid dd { margin: 8px 0 0; font-size: 16px; line-height: 1.6; color: var(--ink-2); }
.limits { margin-top: 16px; padding: 22px 24px; border-radius: 16px; background: #fffaf2; box-shadow: inset 0 0 0 1px rgb(201 120 27 / .35); }
.limits h3 { margin: 0 0 8px; font: 700 17px/1.3 var(--he); color: #7a4610; }
.limits p { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--ink-2); max-width: 80ch; }

.ctl__grid { margin: 36px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ctl__grid article { padding: 24px; border-radius: 18px; background: var(--card); box-shadow: 0 0 0 1px var(--line); }
.ctl__grid h3 { margin: 0 0 8px; font: 700 19px/1.3 var(--he); }
.ctl__grid p { margin: 0; font-size: 16.5px; line-height: 1.65; color: var(--ink-2); }

.never { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); }
.never h2 { font-size: clamp(30px, 3vw, 46px); margin-bottom: 18px; }
.never__h2b { margin-top: 40px; }
.never p { font-size: 17px; line-height: 1.7; color: var(--ink-2); max-width: 60ch; }
.never a { color: #005b8f; }
.xlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.xlist li { position: relative; padding: 14px 16px; padding-inline-start: 50px; border-radius: 14px; background: var(--card); box-shadow: 0 0 0 1px var(--line); font-size: 17px; line-height: 1.5; }
.xlist li::before { content: ""; position: absolute; inset-inline-start: 16px; inset-block-start: 50%; width: 20px; height: 20px; transform: translateY(-50%); border-radius: 7px;
  background: #fdeceb url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M6 6l8 8M14 6l-8 8' stroke='%23c8463b' stroke-width='2' stroke-linecap='round'/></svg>") center / 14px no-repeat; }

.sec .faq { padding-top: clamp(80px, 12vh, 140px); }
.sclose { margin-top: clamp(80px, 12vh, 140px); padding: clamp(70px, 11vh, 120px) var(--gap); text-align: center; }
.sclose h2 { color: #fff; font-size: clamp(40px, 5vw, 84px); }
.sclose p { margin: 20px auto 30px; max-width: 46ch; font-size: clamp(17px, 1.3vw, 21px); color: rgb(255 255 255 / .85); }

/* calm entrance: content is never hidden, it only settles 14px */
.js-reveal .reveal { transform: translateY(14px); transition: transform .7s cubic-bezier(.2, .7, .2, 1); }
.js-reveal .reveal.in { transform: none; }

@media (max-width: 1100px) {
  .loop__flow { flex-direction: column; gap: 30px; }
  .loop__flow > li { flex: none !important; }
  .loop__flow > li:not(:last-child)::after { inset-inline-end: auto; inset-inline-start: 50%; inset-block-start: auto; inset-block-end: -26px; width: 2px; height: 22px; transform: translateX(50%);
    background: repeating-linear-gradient(180deg, #7fc4ff 0 6px, transparent 6px 11px); background-size: 2px 22px; animation-name: flowv; }
  @keyframes flowv { to { background-position: 0 22px; } }
}
@media (max-width: 1180px) { .sh, .tech, .sclose { margin-inline: 0; border-radius: 0; } }
@media (max-width: 900px) {
  .spec__grid, .fears__cols, .ai__grid, .ctl__grid, .never, .steps6 { grid-template-columns: 1fr; }
  .spec__grid div { grid-template-columns: 1fr; gap: 4px; }
  .spec__grid div:nth-child(odd), .spec__grid div:nth-child(even) { border-inline-end: 0; padding-inline: 4px; }
  .sh__ctl { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .loop__flow > li::after { animation: none !important; } }
html.a11y-still .loop__flow > li::after { animation: none !important; }

/* Hebrew never sits in the mono face: mono is for English labels only */
.sh__crumb, .loop figcaption { font-family: var(--he); letter-spacing: 0; font-size: 14px; }
.loop__flow > li > span:not([lang="en"]) { font: 400 13.5px/1.45 var(--he); letter-spacing: 0; }

/* the vault: a sealed glass cube with a closed loop of light (Veo 3.1, 10 s ping-pong loop), floating on the end side of the hero */
.sh::before { z-index: -1; }
.sh__media { position: absolute; z-index: -2; inset-block: 8%; inset-inline-end: 1%; width: 40%; pointer-events: none;
  -webkit-mask-image: radial-gradient(58% 60% at 46% 50%, #000 38%, transparent 76%); mask-image: radial-gradient(58% 60% at 46% 50%, #000 38%, transparent 76%); }
.sh__video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 52%; }
@media (max-width: 900px) {
  .sh__media { inset-inline: 0; inset-block: 0 auto; width: 100%; height: 330px; -webkit-mask-image: radial-gradient(70% 70% at 50% 48%, #000 35%, transparent 74%); mask-image: radial-gradient(70% 70% at 50% 48%, #000 35%, transparent 74%); }
  .sh__in { padding-top: 290px; }
}
@media (prefers-reduced-motion: reduce) { .sh__video { display: none; } .sh__media { background: url(/img/vault.jpg) 50% 52% / cover; } }
html.a11y-still .sh__video { display: none !important; }
html.a11y-still .sh__media { background: url(/img/vault.jpg) 50% 52% / cover; }