:root {
  --isms-ink: #171a2a;
  --isms-copy: #4d596e;
  --isms-muted: #748097;
  --isms-blue: #2779ff;
  --isms-blue-soft: #70a8ff;
  --isms-paper: #f5f8fd;
  --isms-line: #d9e2f0;
  --isms-card: #fff;
  --isms-radius: 22px;
  --isms-shadow: 0 24px 58px rgba(21,40,78,.1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body:is([data-page="iso27001"],[data-page="iso22301"],[data-page="nistcsf"],[data-page="iso42001"],[data-page="iso27017"],[data-page="iso27018"],[data-page="iso27701"]) { margin: 0; color: var(--isms-ink); background: var(--isms-paper); font-family: var(--storm-ui-font,"Avenir Next","Helvetica Neue",Arial,sans-serif); -webkit-font-smoothing: antialiased; overflow-x: clip; }
body:is([data-page="iso27001"],[data-page="iso22301"],[data-page="nistcsf"],[data-page="iso42001"],[data-page="iso27017"],[data-page="iso27018"],[data-page="iso27701"]) main { overflow: hidden; }
body:is([data-page="iso27001"],[data-page="iso22301"],[data-page="nistcsf"],[data-page="iso42001"],[data-page="iso27017"],[data-page="iso27018"],[data-page="iso27701"]) :is(button,a) { font-family: inherit; }
body:is([data-page="iso27001"],[data-page="iso22301"],[data-page="nistcsf"],[data-page="iso42001"],[data-page="iso27017"],[data-page="iso27018"],[data-page="iso27701"]) img { max-width: 100%; }

.isms-shell { width: min(1220px,calc(100% - 56px)); margin-inline: auto; }
.isms-section { padding: 110px 0; }
.isms-kicker { display: inline-flex; align-items: center; gap: 9px; color: #1769e5; font-size: 11px; font-weight: 850; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; }
.isms-kicker::before { width: 28px; height: 2px; content: ""; background: currentColor; }
.isms-title { max-width: 880px; margin: 18px 0 0; color: var(--isms-ink); font-size: clamp(42px,5vw,70px); font-weight: 850; letter-spacing: -.055em; line-height: .98; }
.isms-title em { color: var(--isms-blue); font-style: normal; }
.isms-lede { max-width: 720px; margin: 24px 0 0; color: var(--isms-copy); font-size: 18px; line-height: 1.72; }
.isms-head { display: flex; align-items: end; justify-content: space-between; gap: 48px; margin-bottom: 52px; }
.isms-head .isms-title { font-size: clamp(40px,4.4vw,62px); }
.isms-head .isms-lede { max-width: 480px; margin: 0 0 5px; }
.isms-btn { min-height: 50px; padding: 14px 20px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid transparent; border-radius: 999px; font-size: 14px; font-weight: 800; text-decoration: none; transition: transform .2s ease,box-shadow .2s ease,background .2s ease; }
.isms-btn:hover { transform: translateY(-2px); }
.isms-btn--primary { color: #fff; background: linear-gradient(135deg,#3787ff,#1769e5); box-shadow: 0 15px 34px rgba(39,121,255,.28); }
.isms-btn--primary:hover { box-shadow: 0 19px 40px rgba(39,121,255,.36); }
.isms-btn--ghost { color: #fff; border-color: rgba(215,229,255,.3); background: rgba(255,255,255,.065); }
.isms-btn--ghost:hover { background: rgba(255,255,255,.12); }

/* Hero and PDCA visual */
.isms-hero { position: relative; min-height: 720px; padding: 92px 0 84px; color: #fff; background: radial-gradient(circle at 78% 15%,rgba(75,145,255,.22),transparent 27%),radial-gradient(circle at 60% 85%,rgba(39,121,255,.28),transparent 32%),linear-gradient(135deg,#141827,#1d2942 64%,#172238); }
.isms-hero::before { position: absolute; inset: 0; content: ""; opacity: .25; background-image: linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px); background-size: 54px 54px; mask-image: linear-gradient(to right,transparent 2%,#000 55%,#000); }
.isms-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0,1.02fr) minmax(440px,.98fr); align-items: center; gap: 72px; }
.isms-hero .isms-kicker { color: #82b3ff; }
.isms-hero h1 { max-width: 750px; margin: 23px 0 0; color: #fff; font-size: clamp(54px,6.15vw,84px); font-weight: 850; letter-spacing: -.065em; line-height: .92; }
.isms-hero h1 em { color: #4f91ff; font-style: normal; }
.isms-hero-copy { max-width: 680px; margin: 28px 0 0; color: #d3dff1; font-size: 18px; line-height: 1.7; }
.isms-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.isms-note { margin: 24px 0 0; color: #9caac0; font-size: 12px; line-height: 1.55; }
.isms-cycle { position: relative; min-height: 500px; padding: 24px; border: 1px solid rgba(206,222,249,.2); border-radius: 30px; background: rgba(255,255,255,.06); box-shadow: 0 34px 74px rgba(0,0,0,.29); backdrop-filter: blur(18px); overflow: hidden; }
.isms-cycle-head { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; color: #c9d7eb; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.isms-cycle-head span:last-child { color: #82b3ff; }
.isms-cycle-stage { position: relative; min-height: 410px; display: grid; place-items: center; }
.isms-cycle-ring { position: absolute; width: 305px; height: 305px; border: 2px solid rgba(79,145,255,.32); border-radius: 50%; box-shadow: inset 0 0 0 42px rgba(255,255,255,.025),0 0 70px rgba(39,121,255,.16); }
.isms-cycle-ring::before,.isms-cycle-ring::after { position: absolute; content: ""; border-radius: 50%; }
.isms-cycle-ring::before { inset: 53px; border: 1px dashed rgba(126,175,255,.4); }
.isms-cycle-ring::after { top: -6px; left: 142px; width: 13px; height: 13px; background: #4f91ff; box-shadow: 0 0 0 8px rgba(79,145,255,.15); }
.isms-cycle-centre { position: relative; z-index: 2; width: 150px; height: 150px; display: grid; place-items: center; text-align: center; border-radius: 50%; color: #fff; background: linear-gradient(145deg,#2779ff,#1859ba); box-shadow: 0 20px 50px rgba(12,57,136,.4); }
.isms-cycle-centre strong { display: block; font-size: 26px; letter-spacing: -.045em; }
.isms-cycle-centre small { display: block; margin-top: 5px; color: #cfe0ff; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.isms-cycle-node { position: absolute; z-index: 3; width: 130px; padding: 13px 14px; border: 1px solid rgba(199,220,251,.21); border-radius: 15px; background: rgba(18,25,42,.92); box-shadow: 0 14px 30px rgba(0,0,0,.21); }
.isms-cycle-node strong { display: block; color: #fff; font-size: 13px; }
.isms-cycle-node small { display: block; margin-top: 4px; color: #9cacbf; font-size: 9px; line-height: 1.35; }
.isms-cycle-node--plan { top: 30px; left: 6%; }
.isms-cycle-node--do { top: 58px; right: 3%; }
.isms-cycle-node--check { right: 3%; bottom: 46px; }
.isms-cycle-node--act { bottom: 26px; left: 6%; }

/* Facts and requirements */
.isms-facts { background: #fff; border-bottom: 1px solid var(--isms-line); }
.isms-facts-grid { display: grid; grid-template-columns: repeat(4,1fr); }
.isms-fact { padding: 31px 28px; border-right: 1px solid var(--isms-line); }
.isms-fact:first-child { border-left: 1px solid var(--isms-line); }
.isms-fact strong { display: block; font-size: 23px; font-weight: 850; letter-spacing: -.035em; }
.isms-fact span { display: block; margin-top: 6px; color: var(--isms-muted); font-size: 12px; line-height: 1.45; }
.isms-requirements { background: #fff; }
.isms-requirement-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.isms-requirement { min-height: 230px; padding: 25px; border: 1px solid var(--isms-line); border-radius: var(--isms-radius); background: #fff; transition: transform .22s ease,border-color .22s ease,box-shadow .22s ease; }
.isms-requirement:hover { transform: translateY(-5px); border-color: #79aaff; box-shadow: var(--isms-shadow); }
.isms-requirement-num { color: var(--isms-blue); font-size: 10px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.isms-requirement h3 { margin: 34px 0 11px; font-size: 21px; line-height: 1.16; letter-spacing: -.035em; }
.isms-requirement p { margin: 0; color: var(--isms-copy); font-size: 14px; line-height: 1.62; }

/* STORM support */
.isms-support { background: var(--isms-paper); }
.isms-support-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.isms-support-card { min-height: 288px; padding: 28px; border: 1px solid var(--isms-line); border-radius: var(--isms-radius); background: #fff; box-shadow: 0 12px 34px rgba(20,42,84,.045); }
.isms-support-index { display: flex; align-items: center; justify-content: space-between; color: #8d99ad; font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.isms-support-index::after { width: 38px; height: 3px; content: ""; border-radius: 4px; background: linear-gradient(90deg,var(--isms-blue),var(--isms-blue-soft)); }
.isms-support-card h3 { margin: 33px 0 10px; font-size: 21px; line-height: 1.16; letter-spacing: -.035em; }
.isms-support-card p { margin: 0; color: var(--isms-copy); font-size: 14px; line-height: 1.65; }
.isms-support-card small { display: block; margin-top: 18px; color: #8794a8; font-size: 10px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }

/* Product stories */
.isms-product { background: #fff; }
.isms-story-list { display: grid; gap: 88px; }
.isms-story { display: grid; grid-template-columns: minmax(0,1.08fr) minmax(340px,.92fr); align-items: center; gap: 68px; }
.isms-story:nth-child(even) .isms-story-media { order: 2; }
.isms-story-media { position: relative; padding: 12px; border: 1px solid #d4dfef; border-radius: 24px; background: linear-gradient(145deg,#fbfdff,#eef3fa); box-shadow: var(--isms-shadow); }
.isms-story-media::after { position: absolute; top: -11px; right: 30px; width: 78px; height: 5px; content: ""; border-radius: 9px; background: linear-gradient(90deg,var(--isms-blue),var(--isms-blue-soft)); }
.isms-story-media img { width: 100%; display: block; border: 1px solid #e0e7f0; border-radius: 14px; }
.isms-story-media--double { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.isms-story-copy h3 { margin: 19px 0 16px; font-size: clamp(34px,4vw,50px); line-height: 1.02; letter-spacing: -.05em; }
.isms-story-copy p { margin: 0; color: var(--isms-copy); font-size: 16px; line-height: 1.72; }
.isms-checks { margin: 24px 0 0; padding: 0; display: grid; gap: 12px; list-style: none; }
.isms-checks li { position: relative; padding-left: 26px; color: #3f4a5e; font-size: 14px; line-height: 1.48; }
.isms-checks li::before { position: absolute; top: 2px; left: 0; width: 17px; height: 17px; display: grid; place-items: center; content: "✓"; border-radius: 50%; color: #fff; background: var(--isms-blue); font-size: 10px; font-weight: 900; }

/* Annex A themes */
.isms-themes { position: relative; color: #fff; background: linear-gradient(135deg,#171b2a,#23304a); }
.isms-themes::before { position: absolute; inset: 0; content: ""; background: radial-gradient(circle at 88% 8%,rgba(39,121,255,.22),transparent 29%); }
.isms-themes .isms-shell { position: relative; }
.isms-themes .isms-kicker { color: #82b3ff; }
.isms-themes .isms-title { color: #fff; }
.isms-themes .isms-lede { color: #c8d5e7; }
.isms-theme-grid { margin-top: 54px; display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.isms-theme { min-height: 315px; padding: 28px 24px; border: 1px solid rgba(204,221,246,.2); border-radius: 20px; background: rgba(255,255,255,.045); }
.isms-theme-count { color: #82b3ff; font-size: 12px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.isms-theme h3 { margin: 38px 0 14px; color: #fff; font-size: 23px; letter-spacing: -.035em; }
.isms-theme p { margin: 0; color: #b9c8da; font-size: 14px; line-height: 1.64; }
.isms-theme small { display: block; margin-top: 22px; color: #8797af; font-size: 10px; font-weight: 800; line-height: 1.45; letter-spacing: .07em; text-transform: uppercase; }
.isms-theme-note { margin: 28px 0 0; color: #94a4ba; font-size: 11px; line-height: 1.55; }

/* Lifecycle, sources, FAQ, final */
.isms-path { background: var(--isms-paper); }
.isms-path-grid { margin-top: 54px; display: grid; grid-template-columns: repeat(5,1fr); gap: 10px; }
.isms-step { position: relative; min-height: 285px; padding: 26px 21px; border: 1px solid var(--isms-line); border-radius: 20px; background: #fff; }
.isms-step::after { position: absolute; top: 42px; right: -13px; z-index: 2; width: 26px; height: 2px; content: ""; background: #70a8ff; }
.isms-step:last-child::after { display: none; }
.isms-step-num { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: var(--isms-blue); font-size: 12px; font-weight: 850; }
.isms-step h3 { margin: 32px 0 12px; font-size: 21px; letter-spacing: -.035em; }
.isms-step p { margin: 0; color: var(--isms-copy); font-size: 13px; line-height: 1.62; }
.isms-step small { position: absolute; right: 21px; bottom: 22px; left: 21px; color: #8794a8; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.isms-source { padding: 34px 0; border-block: 1px solid var(--isms-line); background: #fff; }
.isms-source-inner { display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.isms-source p { max-width: 610px; margin: 0; color: var(--isms-copy); font-size: 13px; line-height: 1.58; }
.isms-source-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.isms-source-links a { padding: 9px 12px; border: 1px solid #bcd2f5; border-radius: 999px; color: #1457bd; background: #f5f9ff; font-size: 11px; font-weight: 750; text-decoration: none; }
.isms-source-links a:hover { border-color: #6d9ee8; background: #eaf2ff; }
.isms-faq { background: #fff; }
.isms-faq-grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: 72px; align-items: start; }
.isms-faq-list { border-top: 1px solid var(--isms-line); }
.isms-faq-item { border-bottom: 1px solid var(--isms-line); }
.isms-faq-item summary { position: relative; padding: 24px 46px 24px 0; cursor: pointer; font-size: 17px; font-weight: 750; line-height: 1.35; list-style: none; }
.isms-faq-item summary::-webkit-details-marker { display: none; }
.isms-faq-item summary::after { position: absolute; top: 23px; right: 4px; content: "+"; color: var(--isms-blue); font-size: 25px; font-weight: 500; transition: transform .2s ease; }
.isms-faq-item[open] summary::after { transform: rotate(45deg); }
.isms-faq-answer { padding: 0 38px 24px 0; color: var(--isms-copy); font-size: 14px; line-height: 1.72; }
.isms-final { padding: 88px 0; color: #fff; background: radial-gradient(circle at 82% 0%,rgba(39,121,255,.24),transparent 34%),linear-gradient(130deg,#171b2a,#25334f); }
.isms-final-inner { display: flex; align-items: center; justify-content: space-between; gap: 60px; }
.isms-final .isms-kicker { color: #82b3ff; }
.isms-final h2 { max-width: 760px; margin: 14px 0 0; color: #fff; font-size: clamp(40px,5vw,66px); line-height: .98; letter-spacing: -.055em; }
.isms-final h2 em { color: #4f91ff; font-style: normal; }
.isms-final p { max-width: 690px; margin: 20px 0 0; color: #cbd8e9; font-size: 16px; line-height: 1.65; }
.isms-final .isms-btn { flex: 0 0 auto; }

@media (max-width:1100px) {
  .isms-hero { min-height: 0; }
  .isms-hero-grid { grid-template-columns: 1fr; gap: 52px; }
  .isms-cycle { max-width: 750px; }
  .isms-requirement-grid,.isms-support-grid { grid-template-columns: repeat(2,1fr); }
  .isms-story { gap: 42px; }
  .isms-theme-grid { grid-template-columns: repeat(2,1fr); }
  .isms-path-grid { grid-template-columns: repeat(3,1fr); }
  .isms-step:nth-child(3)::after { display: none; }
}
@media (max-width:820px) {
  .isms-section { padding: 82px 0; }
  .isms-head { display: block; }
  .isms-head .isms-lede { margin-top: 22px; }
  .isms-facts-grid { grid-template-columns: repeat(2,1fr); }
  .isms-fact:nth-child(3) { border-top: 1px solid var(--isms-line); border-left: 1px solid var(--isms-line); }
  .isms-fact:nth-child(4) { border-top: 1px solid var(--isms-line); }
  .isms-story,.isms-story:nth-child(even) { grid-template-columns: 1fr; }
  .isms-story:nth-child(even) .isms-story-media { order: 0; }
  .isms-source-inner,.isms-final-inner { align-items: flex-start; flex-direction: column; }
  .isms-source-links { justify-content: flex-start; }
  .isms-faq-grid { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width:580px) {
  .isms-shell { width: min(100% - 28px,1220px); }
  .isms-hero { padding: 68px 0 62px; }
  .isms-hero h1 { font-size: clamp(46px,14.5vw,64px); }
  .isms-cycle { min-height: 470px; padding: 15px; }
  .isms-cycle-ring { width: 245px; height: 245px; }
  .isms-cycle-ring::after { left: 114px; }
  .isms-cycle-centre { width: 126px; height: 126px; }
  .isms-cycle-node { width: 112px; padding: 11px; }
  .isms-cycle-node--plan,.isms-cycle-node--act { left: 0; }
  .isms-cycle-node--do,.isms-cycle-node--check { right: 0; }
  .isms-facts-grid,.isms-requirement-grid,.isms-support-grid,.isms-theme-grid,.isms-path-grid { grid-template-columns: 1fr; }
  .isms-fact { border-top: 1px solid var(--isms-line); border-left: 1px solid var(--isms-line); }
  .isms-fact:first-child { border-top: 0; }
  .isms-step::after { display: none; }
  .isms-story-media--double { grid-template-columns: 1fr; }
  .isms-source-links a { width: 100%; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior: auto; }
  .isms-btn,.isms-requirement { transition: none; }
}

/* Tablet-framed screenshot slideshow */
body[data-page] .isms-tablet {
  min-width: 0;
  position: relative;
  padding: 8px;
  border-radius: 16px;
  background: #0e1a2b;
  box-shadow: 0 30px 60px -25px rgba(14,26,43,.25);
}
body[data-page] .tour-slides { display: grid; border-radius: 10px; overflow: hidden; }
body[data-page] .tour-slide {
  grid-area: 1 / 1;
  margin: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease, visibility .6s;
}
body[data-page] .tour-slide.is-active { opacity: 1; visibility: visible; }
body[data-page] .tour-slide img { width: 100%; height: auto; display: block; border-radius: 10px; }
body[data-page] .tour-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(14,26,43,.72);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background .2s ease;
}
body[data-page] .tour-nav:is(:hover,:focus-visible) { background: rgba(14,26,43,.92); }
body[data-page] .tour-nav--prev { left: 16px; }
body[data-page] .tour-nav--next { right: 16px; }
body[data-page] .tour-dots { display: flex; justify-content: center; gap: 8px; padding: 12px 0 4px; }
body[data-page] .tour-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.35);
  cursor: pointer;
  transition: width .3s ease, background .3s ease;
}
body[data-page] .tour-dot.is-active { width: 24px; background: #fff; }
@media (prefers-reduced-motion: reduce) {
  body[data-page] .tour-slide { transition: none; }
}
body[data-page] .tour-slide img { border: 0; }
body[data-page] .isms-story:nth-child(even) .isms-tablet { order: 2; }
@media (max-width: 820px) {
  body[data-page] .isms-story:nth-child(even) .isms-tablet { order: 0; }
}
body[data-page] { --tour-accent: var(--isms-blue); }