/* iSecure design system. Shared by all public Django pages. */
:root {
  --ink:#132a42;
  --ink-strong:#0d2035;
  --text:#4d6073;
  --muted:#677789;
  --paper:#fff;
  --surface:#f3f5f7;
  --line:#dce3e9;
  --accent:#d45a2c;
  --primary:#1e4e76;
  --radius:12px;
  --space-section:104px;
  --font:'Pretendard Variable','Apple SD Gothic Neo','Noto Sans KR',sans-serif;
  --shadow:0 14px 36px #152d4310
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:100px
}
body.isecure-site {
  margin:0;
  color:var(--ink);
  background:var(--paper);
  font-family:var(--font);
  font-size:16px;
  line-height:1.7;
  font-weight:400;
  -webkit-font-smoothing:antialiased
}
.isecure-site * {
  box-sizing:border-box
}
.isecure-site h1,.isecure-site h2,.isecure-site h3,.isecure-site h4,.isecure-site h5 {
  font-family:var(--font);
  color:var(--ink);
  font-weight:700;
  letter-spacing:-.035em;
  line-height:1.3
}
.isecure-site h1 {
  font-size:clamp(2.5rem,5vw,4.65rem);
  margin:0
}
.isecure-site h2 {
  font-size:clamp(1.95rem,3.2vw,2.85rem);
  margin:0 0 24px
}
.isecure-site h3 {
  font-size:1.4rem
}
.isecure-site h4 {
  font-size:1.2rem
}
.isecure-site p {
  color:var(--text);
  font-size:1rem;
  line-height:1.8;
  font-weight:400
}
.isecure-site a {
  color:inherit;
  text-decoration:none
}
.isecure-site a:hover {
  color:var(--primary);
  text-decoration:none
}
.isecure-site img {
  max-width:100%
}
.isecure-site button,.isecure-site input,.isecure-site textarea,.isecure-site select {
  font-family:inherit
}
.isecure-site :focus-visible {
  outline:3px solid #d45a2c;
  outline-offset:5px
}
.isecure-site [hidden] {
  display:none!important
}
.site-shell,.isecure-site .container {
  width:calc(100% - 96px);
  max-width:1240px;
  margin-left:auto;
  margin-right:auto;
  padding-left:0;
  padding-right:0
}
.skip-link {
  position:fixed;
  top:-100px;
  left:20px;
  z-index:2000;
  padding:12px 20px;
  background:#fff
}
.skip-link:focus {
  top:10px
}
.site-main {
  overflow:clip
}
.site-main:focus {
  outline:none
}
.site-header {
  position:sticky;
  top:0;
  z-index:1050;
  background:#fffffff5;
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(16px)
}
.header-inner {
  height:88px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:36px
}
.site-brand {
  display:flex;
  align-items:center;
  gap:20px;
  flex-shrink:0
}
.site-brand img {
  object-fit:contain;
  height:32px;
  width:119px
}
.site-brand span {
  font-size:9px;
  letter-spacing:.13em;
  line-height:1.4;
  border-left:1px solid var(--line);
  padding-left:18px;
  max-width:90px
}
.site-navigation {
  display:flex;
  align-items:center;
  gap:27px;
  font-size:14px;
  font-weight:600
}
.nav-group {
  position:relative
}
.nav-group summary {
  list-style:none;
  cursor:pointer;
  padding:24px 0
}
.nav-group summary::-webkit-details-marker {
  display:none
}
.nav-group summary:after {
  content:'⌄';
  margin-left:7px;
  font-size:12px
}
.nav-panel {
  position:absolute;
  top:65px;
  left:-24px;
  width:280px;
  background:white;
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:12px;
  box-shadow:var(--shadow)
}
.nav-panel a {
  display:block;
  padding:13px 12px;
  border-radius:6px
}
.nav-panel a:hover {
  background:var(--surface)
}
.nav-panel small {
  display:block;
  color:var(--muted);
  font-size:12px;
  margin-top:3px
}
.menu-toggle {
  display:none;
  background:none;
  border:1px solid var(--line);
  border-radius:6px;
  padding:7px 12px;
  color:var(--ink)
}
.site-button {
  display:inline-flex;
  justify-content:space-between;
  align-items:center;
  gap:28px;
  background:var(--ink);
  color:white!important;
  padding:16px 23px;
  border:1px solid var(--ink);
  border-radius:6px;
  font-size:14px;
  font-weight:600;
  transition:background .2s,transform .2s
}
.site-button:hover {
  background:var(--primary);
  transform:translateY(-2px)
}
.site-button.button-small {
  padding:11px 17px;
  font-size:13px;
  gap:20px
}
.site-button.button-white {
  background:white;
  color:var(--ink)!important;
  border-color:white
}
.text-link {
  display:inline-flex;
  align-items:center;
  gap:20px;
  font-size:14px;
  font-weight:600;
  border-bottom:1px solid var(--line);
  padding:10px 0
}
.eyebrow,.isecure-site p.eyebrow {
  font-size:11px;
  font-weight:650;
  letter-spacing:.12em;
  color:var(--muted);
  margin:0 0 24px;
  line-height:1.5
}
.status-dot {
  display:inline-block;
  width:7px;
  height:7px;
  background:var(--accent);
  border-radius:50%;
  margin-right:8px
}
.home-hero {
  background:linear-gradient(110deg,#fff 37%,#f4f6f8 80%)
}
.hero-grid {
  display:grid;
  grid-template-columns:1.04fr 1fr;
  gap:32px;
  align-items:center;
  padding-top:56px;
  padding-bottom:48px
}
.hero-copy {
  padding:18px 0
}
.hero-copy h1 {
  line-height:1.23;
  letter-spacing:-.065em;
  font-weight:740
}
.accent-dot {
  color:var(--accent)
}
.hero-copy .hero-description {
  margin:30px 0;
  font-size:17px;
  line-height:1.9
}
.hero-actions {
  display:flex;
  align-items:center;
  gap:26px;
  margin-top:36px
}
.hero-proof {
  display:flex;
  flex-wrap:wrap;
  gap:0;
  margin-top:43px;
  color:var(--muted);
  font-size:12px
}
.hero-proof span+span:before {
  content:'';
  display:inline-block;
  height:10px;
  border-left:1px solid #b9c4cc;
  margin:0 16px
}
.hero-visual {
  align-self:stretch;
  position:relative;
  padding:20px 22px 0;
  min-width:0
}
.visual-caption {
  display:flex;
  justify-content:space-between;
  font-size:9px;
  letter-spacing:.11em;
  color:#60748a
}
.motion-stage {
  position:relative;
  width:100%;
  aspect-ratio:1;
  max-height:485px
}
.motion-stage img,.motion-stage aval-player {
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain
}
.motion-stage aval-player {
  opacity:0
}
.hero-visual.motion-ready aval-player {
  opacity:1
}
.hero-visual.motion-ready #motion-poster {
  opacity:0
}
.motion-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px
}
.motion-controls {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:5px;
  background:#e5eaef;
  border-radius:7px;
  padding:5px;
  flex:1
}
.motion-controls button {
  border:0;
  background:transparent;
  color:var(--text);
  font-size:12px;
  font-weight:600;
  padding:9px 6px;
  border-radius:4px;
  cursor:pointer
}
.motion-controls button[aria-pressed=true] {
  background:white;
  color:var(--ink);
  box-shadow:0 2px 8px #132a4210
}
.motion-pause {
  width:38px;
  height:38px;
  border:1px solid var(--line);
  border-radius:5px;
  color:var(--ink);
  background:white;
  cursor:pointer
}
.hero-visual .motion-description {
  font-size:12px;
  margin:14px 0 0;
  min-height:44px
}
.hero-baseline {
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  padding:19px 0;
  font-size:10px;
  letter-spacing:.055em;
  color:var(--muted)
}
.hero-baseline>span:last-child {
  letter-spacing:0;
  font-size:12px
}
.hero-baseline>span:last-child>span {
  margin-left:25px
}
.site-section {
  padding:var(--space-section) 0
}
.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:60px;
  margin-bottom:44px
}
.section-heading h2 {
  margin-bottom:0
}
.section-heading>p,.section-heading>div:last-child>p {
  max-width:450px;
  font-size:15px;
  margin:0 0 6px
}
.offering-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px
}
.offering-card {
  display:flex;
  flex-direction:column;
  padding:30px;
  border:1px solid var(--line);
  border-radius:var(--radius);
  transition:border-color .25s,transform .25s,box-shadow .25s;
  background:white
}
.offering-card:hover {
  border-color:#9aaebf;
  transform:translateY(-5px);
  box-shadow:var(--shadow)
}
.card-index {
  font-size:10px;
  letter-spacing:.09em;
  color:var(--muted)
}
.service-glyph {
  display:grid;
  place-items:center;
  width:58px;
  height:58px;
  font-size:29px;
  font-weight:400;
  margin:33px 0 30px;
  color:var(--primary);
  border:1px solid #b7c6d3;
  border-radius:12px;
  background:var(--surface)
}
.glyph-scan {
  border-style:dashed
}
.glyph-code {
  font-size:22px
}
.offering-card h3 {
  margin:0 0 18px;
  font-size:22px
}
.offering-card p {
  font-size:15px;
  margin:0 0 30px
}
.card-bottom {
  margin-top:auto;
  padding-top:25px;
  border-top:1px solid var(--line);
  font-size:11px;
  display:flex;
  justify-content:space-between;
  align-items:center
}
.card-bottom>span {
  font-size:20px
}
.safeweb-feature {
  background:#f5f5f2
}
.feature-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:78px
}
.feature-image {
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  background:#e9e9e4
}
.feature-image img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:1.777;
  object-fit:contain
}
.image-note {
  position:absolute;
  bottom:24px;
  left:26px;
  font-size:10px;
  color:#536372;
  letter-spacing:.13em
}
.feature-copy .lead-copy {
  font-size:21px;
  line-height:1.6;
  color:var(--ink);
  margin:26px 0 18px
}
.feature-copy p {
  font-size:15px
}
.feature-copy .text-link {
  margin-top:13px
}
.process-strip {
  list-style:none;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  margin-top:64px;
  margin-bottom:0;
  gap:30px
}
.process-strip li {
  border-top:1px solid #bcc7cf;
  padding:22px 0 0
}
.process-strip li>span {
  font-size:12px;
  color:var(--accent)
}
.process-strip h3 {
  font-size:17px;
  margin:14px 0 5px
}
.process-strip p {
  font-size:13px;
  margin:0
}
.product-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px
}
.product-card {
  border-radius:var(--radius);
  padding:32px 38px 38px;
  position:relative;
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line)
}
.product-card-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:10px;
  letter-spacing:.1em
}
.product-card-top>span:last-child {
  font-size:24px
}
.product-irms {
  background:var(--ink-strong);
  color:#fff!important;
  border-color:var(--ink-strong)
}
.product-irms h3,.product-irms p {
  color:white
}
.product-card h3 {
  font-size:44px;
  margin:20px 0 0;
  letter-spacing:-.04em
}
.product-card>p {
  font-size:16px;
  margin:5px 0 25px
}
.product-detail {
  font-size:14px;
  line-height:1.8;
  color:var(--text);
  border-top:1px solid var(--line);
  padding-top:23px
}
.product-irms .product-detail {
  color:#b5c6d8;
  border-color:#334658
}
.risk-art {
  height:175px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:13px;
  position:relative;
  padding:25px 0 15px;
  transform:skewY(-9deg);
  max-width:260px;
  margin:0 auto
}
.risk-art span {
  width:26px;
  height:60%;
  border:1px solid #7796b0;
  background:linear-gradient(90deg,#3f5a75,#172e47);
  box-shadow:9px -8px 0 #294660
}
.risk-art span:nth-child(2) {
  height:85%
}
.risk-art span:nth-child(3) {
  height:47%
}
.risk-art span:nth-child(4) {
  height:76%
}
.risk-art span:nth-child(5) {
  height:100%;
  background:#c37346;
  border-color:#e2a47c;
  box-shadow:9px -8px 0 #935430
}
.risk-art span:nth-child(6) {
  height:67%
}
.mail-art {
  height:175px;
  display:grid;
  place-items:center;
  position:relative
}
.mail-art i {
  width:180px;
  height:110px;
  border:1px solid #9baebf;
  display:block;
  background:linear-gradient(145deg,#fff,#dce4eb);
  border-radius:7px;
  transform:rotate(-8deg);
  box-shadow:10px 16px 25px #12284015
}
.mail-art i:before {
  content:'';
  display:block;
  width:127px;
  height:127px;
  transform:translate(26px,-68px) rotate(45deg);
  border-right:1px solid #acbdca;
  border-bottom:1px solid #acbdca;
  border-radius:0 0 10px 0
}
.mail-art span {
  position:absolute;
  left:calc(50% + 45px);
  top:95px;
  border-radius:50%;
  background:var(--ink);
  color:white;
  font-size:28px;
  width:54px;
  height:54px;
  text-align:center;
  line-height:54px;
  border:4px solid #f3f5f7
}
.flowgraph-section {
  background:#f3f5f7
}
.graph-art {
  color:#a0b2c1;
  text-align:center
}
.graph-art svg {
  width:100%;
  height:auto
}
.graph-art>span {
  font-size:10px;
  letter-spacing:.15em;
  color:var(--muted)
}
.principles-section h2 {
  font-size:clamp(1.8rem,3vw,2.7rem)
}
.contact-banner {
  background:var(--ink);
  padding:74px 0;
  color:white
}
.contact-banner-inner {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:35px
}
.contact-banner h2 {
  color:white;
  font-size:clamp(1.8rem,3vw,2.6rem);
  margin:0 0 15px
}
.contact-banner p {
  color:#bdcad7;
  margin:0;
  font-size:15px
}
.contact-banner p.eyebrow {
  color:#9fb5c7;
  margin:0 0 20px
}
.site-footer {
  padding:62px 0 28px;
  background:#fff;
  color:var(--text)
}
.footer-top,.footer-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px
}
.footer-wordmark {
  font-size:35px;
  font-weight:750;
  letter-spacing:-.055em;
  color:var(--ink)!important
}
.footer-wordmark span {
  font-size:12px;
  vertical-align:top;
  margin-left:4px
}
.footer-top p {
  font-size:12px;
  margin:8px 0 0
}
.footer-email {
  font-size:21px;
  color:var(--ink)!important
}
.footer-bottom {
  margin-top:45px;
  padding-top:26px;
  border-top:1px solid var(--line);
  font-size:12px
}
.footer-bottom p {
  font-size:11px;
  margin:0
}
.footer-bottom address {
  margin:0;
  font-style:normal;
  line-height:1.8
}
.footer-certifications {
  display:flex;
  align-items:center;
  gap:22px
}
.footer-certifications img {
  width:auto;
  max-width:90px;
  height:45px;
  object-fit:contain
}
/* Shared inner-page composition, independent of historical photo headers. */
.page-intro {
  background:var(--ink-strong);
  color:white;
  padding:28px 0 66px;
  position:relative
}
.page-breadcrumb {
  display:flex;
  gap:13px;
  align-items:center;
  font-size:11px;
  color:#9cafc1;
  margin-bottom:50px
}
.page-intro-layout {
  display:grid;
  grid-template-columns:1fr 240px;
  align-items:center;
  gap:48px
}
.page-intro h1 {
  color:#fff;
  font-size:clamp(2.1rem,4.3vw,3.6rem);
  max-width:920px
}
.page-intro .eyebrow {
  color:#a6bed2;
  margin-bottom:17px
}
.page-intro .page-subtitle {
  color:#d5dfe8;
  font-size:19px;
  margin:20px 0 0
}
.page-intro .page-description {
  color:#a7bacb;
  max-width:780px;
  font-size:15px;
  margin:18px 0 0
}
.intro-symbol {
  height:185px;
  position:relative;
  perspective:600px;
  opacity:.75
}
.intro-symbol span {
  position:absolute;
  left:25px;
  top:20px;
  width:145px;
  height:145px;
  border:1px solid #87a1b9;
  border-radius:22px;
  transform:rotateX(50deg) rotateZ(-32deg);
  background:linear-gradient(135deg,#7e9bbd15,#9abbcf02)
}
.intro-symbol span:nth-child(2) {
  top:0;
  left:50px;
  border-color:#7995ad
}
.intro-symbol span:nth-child(3) {
  top:-20px;
  left:75px;
  border-color:#c9d8e6
}
.isecure-site .section {
  padding:80px 0
}
.isecure-site .section-title {
  font-size:clamp(1.9rem,3vw,2.5rem);
  font-weight:700;
  color:var(--ink);
  text-shadow:none
}
.isecure-site .section-description {
  font-size:16px;
  line-height:1.85;
  color:var(--text)
}
.isecure-site .service-card,.isecure-site .tech-card,.isecure-site .feature-card,.isecure-site .benefit-card {
  border:1px solid var(--line);
  box-shadow:none!important;
  border-radius:var(--radius)!important
}
.isecure-site .service-card:hover,.isecure-site .tech-card:hover {
  border-color:#9cb0c1;
  box-shadow:var(--shadow)!important
}
.isecure-site .btn {
  font-size:14px;
  font-weight:600;
  letter-spacing:0;
  border-radius:6px!important;
  padding:13px 23px;
  box-shadow:none!important;
  background:var(--ink);
  color:white
}
.isecure-site .btn-primary,.isecure-site .btn-info {
  background:var(--ink);
  color:white
}
.isecure-site .btn:hover {
  background:var(--primary)
}
.isecure-site .btn-outline-white,.isecure-site .btn-outline-primary {
  border:1px solid var(--line);
  color:var(--ink);
  background:#fff
}
.isecure-site .tags-wrapper .btn:hover,
.isecure-site .tags-wrapper .btn:focus-visible {
  color:var(--ink)!important;
  background:#e8f0f6!important;
  border-color:#7f9db4!important;
}
.isecure-site .form-control {
  border:1px solid #bdc9d3;
  border-radius:6px;
  background:white;
  color:var(--ink);
  font-size:15px;
  padding:13px 15px;
  min-height:46px
}
.isecure-site textarea.form-control {
  border-radius:6px;
  min-height:140px
}
.isecure-site .form-control:focus {
  border-color:var(--primary);
  box-shadow:0 0 0 3px #1e4e7615
}
.isecure-site label {
  font-size:14px;
  font-weight:600
}
.isecure-site .nav-pills>.nav-item>.nav-link {
  border-radius:6px;
  color:var(--ink);
  border:1px solid var(--line);
  background:white;
  box-shadow:none
}
.isecure-site .nav-pills>.nav-item>.nav-link.active {
  background:var(--ink);
  color:white
}
.isecure-site .nav-tabs {
  border-bottom:1px solid var(--line)
}
.isecure-site .nav-tabs>.nav-item>.nav-link {
  color:var(--text);
  border-radius:6px 6px 0 0
}
.isecure-site .nav-tabs>.nav-item>.nav-link.active {
  color:var(--ink);
  background:var(--surface)
}
.isecure-site .contact-section {
  background:var(--surface)!important
}
.isecure-site .contact-section h2 {
  color:var(--ink)!important;
  text-shadow:none!important
}
.isecure-site .contact-info-wrapper {
  height:100%!important;
  min-height:0!important;
  border:1px solid var(--line);
  box-shadow:none!important
}
.isecure-site .tech-section {
  background:var(--surface)!important
}
.isecure-site .tech-section h2,.isecure-site .tech-section>.container>.row>div>p {
  color:var(--ink)!important;
  text-shadow:none!important
}
.security-quote {
  padding:50px 40px;
  background:var(--ink);
  text-align:left;
  border-radius:var(--radius);
  margin-bottom:40px
}
.isecure-site .security-quote h3,.isecure-site .security-quote p {
  color:white
}
.isecure-site .security-quote h3 {
  font-size:28px
}
.isecure-site .security-quote p {
  margin:0;
  font-size:18px
}
.isecure-site .pagination .page-item.active>.page-link {
  background:var(--ink);
  border-color:var(--ink)
}
.isecure-site .table-responsive {
  border:1px solid var(--line);
  border-radius:8px
}
.isecure-site table {
  font-size:14px
}
.isecure-site .modal-content {
  border-radius:12px
}
.isecure-site .toastui-editor-contents {
  font-family:var(--font);
  font-size:16px
}
.isecure-site .blog-item {
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:none
}
.isecure-site .blog-item:hover {
  box-shadow:var(--shadow)
}
@media(min-width:1440px) {
  .hero-grid {
    padding-top:76px;
    padding-bottom:62px
  }
}
@media(max-width:1100px) {
  .site-brand span {
    display:none
  }
  .site-navigation {
    gap:20px
  }
  .site-shell,.isecure-site .container {
    width:calc(100% - 64px)
  }
  .hero-copy h1 {
    font-size:54px
  }
  .hero-actions {
    gap:17px
  }
  .hero-actions .site-button {
    padding:14px 17px;
    gap:17px
  }
  .feature-grid {
    gap:40px
  }
  .offering-card {
    padding:25px
  }
  .offering-card h3 {
    font-size:20px
  }
  .hero-copy .hero-description {
    font-size:15px
  }
}
@media(max-width:900px) {
  .header-inner {
    height:76px
  }
  .menu-toggle {
    display:block
  }
  .site-navigation {
    display:flex;
    flex-wrap:wrap;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:white;
    padding:22px 32px;
    border-bottom:1px solid var(--line);
    gap:15px 25px
  }
  .js .site-navigation {
    display:none
  }
  .js .site-navigation.is-open {
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    max-height:calc(100dvh - 76px);
    overflow:auto
  }
  .site-navigation>a {
    padding:12px 0
  }
  .site-navigation .site-button {
    padding:14px 18px;
    margin-top:12px
  }
  .nav-group summary {
    padding:12px 0
  }
  .nav-panel {
    position:static;
    box-shadow:none;
    width:100%;
    border:0;
    border-left:1px solid var(--line);
    border-radius:0;
    padding:0 10px;
    margin:4px 0 10px
  }
  .hero-grid {
    grid-template-columns:1fr 1fr;
    gap:15px
  }
  .hero-copy h1 {
    font-size:44px
  }
  .hero-actions {
    align-items:flex-start;
    flex-direction:column;
    gap:10px
  }
  .hero-proof {
    margin-top:25px;
    font-size:10px
  }
  .hero-proof span+span:before {
    margin:0 10px
  }
  .hero-visual {
    padding:20px 0 0
  }
  .visual-caption {
    font-size:8px
  }
  .section-heading {
    gap:30px
  }
  .section-heading>p {
    max-width:340px
  }
  .offering-grid {
    gap:12px
  }
  .offering-card {
    padding:20px
  }
  .offering-card h3 {
    font-size:19px
  }
  .offering-card p {
    font-size:14px
  }
  .card-bottom {
    font-size:9px
  }
  .product-card {
    padding:26px
  }
  .footer-email {
    font-size:18px
  }
  .page-intro-layout {
    grid-template-columns:1fr 150px
  }
  .intro-symbol {
    transform:scale(.75);
    transform-origin:right center
  }
}
@media(max-width:640px) {
  :root {
    --space-section:68px
  }
  .site-shell,.isecure-site .container {
    width:calc(100% - 40px)
  }
  .header-inner {
    height:70px
  }
  .site-brand img {
    height:29px;
    width:110px
  }
  .hero-grid {
    display:flex;
    flex-direction:column;
    padding-top:38px;
    padding-bottom:25px;
    gap:26px;
    align-items:stretch
  }
  .hero-copy {
    padding:0
  }
  .hero-copy h1 {
    font-size:clamp(36px,10.5vw,54px)
  }
  .hero-copy .eyebrow {
    font-size:9px;
    margin-bottom:20px
  }
  .hero-copy .hero-description {
    margin:22px 0;
    font-size:15px;
    line-height:1.8
  }
  .hero-actions {
    flex-direction:row;
    align-items:center;
    gap:20px;
    margin-top:25px
  }
  .hero-actions .site-button {
    font-size:12px;
    padding:13px 15px;
    gap:20px
  }
  .hero-actions .text-link {
    font-size:12px;
    gap:14px
  }
  .hero-proof {
    margin-top:27px;
    font-size:11px
  }
  .hero-visual {
    padding:16px 16px 2px;
    background:#f3f5f7;
    border-radius:12px
  }
  .motion-stage {
    max-height:355px
  }
  .hero-visual .motion-description {
    font-size:11px;
    min-height:35px
  }
  .visual-caption {
    font-size:8px
  }
  .hero-baseline {
    font-size:8px
  }
  .hero-baseline>span:last-child {
    font-size:9px
  }
  .hero-baseline>span:last-child>span {
    margin-left:8px
  }
  .section-heading {
    flex-direction:column;
    align-items:flex-start;
    gap:24px;
    margin-bottom:30px
  }
  .section-heading>p,.section-heading>div:last-child>p {
    font-size:14px;
    max-width:none
  }
  .offering-grid {
    grid-template-columns:1fr;
    gap:15px
  }
  .offering-card {
    padding:26px;
    position:relative
  }
  .service-glyph {
    position:absolute;
    right:24px;
    top:18px;
    width:42px;
    height:42px;
    font-size:22px;
    margin:0
  }
  .glyph-code {
    font-size:16px
  }
  .offering-card h3 {
    margin-top:30px;
    font-size:23px
  }
  .offering-card p {
    font-size:15px;
    margin-bottom:24px
  }
  .card-bottom {
    font-size:11px;
    padding-top:17px
  }
  .feature-grid {
    grid-template-columns:1fr;
    gap:38px
  }
  .feature-image img {
    aspect-ratio:1.25
  }
  .feature-copy .lead-copy {
    font-size:19px
  }
  .process-strip {
    grid-template-columns:1fr 1fr;
    gap:28px 24px;
    margin-top:40px
  }
  .process-strip li {
    padding-top:17px
  }
  .process-strip h3 {
    font-size:16px
  }
  .process-strip p {
    font-size:12px
  }
  .product-grid {
    grid-template-columns:1fr;
    gap:20px
  }
  .product-card {
    padding:27px
  }
  .product-card h3 {
    font-size:40px
  }
  .product-detail {
    font-size:13px
  }
  .flowgraph-section .feature-copy {
    order:1
  }
  .flowgraph-section .graph-art {
    order:2
  }
  .contact-banner {
    padding:53px 0
  }
  .contact-banner-inner {
    align-items:flex-start;
    flex-direction:column;
    gap:28px
  }
  .contact-banner p {
    font-size:14px
  }
  .footer-top,.footer-bottom {
    flex-wrap:wrap;
    gap:24px
  }
  .footer-top {
    align-items:flex-start;
    flex-direction:column
  }
  .footer-email {
    font-size:18px
  }
  .footer-bottom {
    margin-top:32px
  }
  .footer-certifications img {
    height:35px
  }
  .footer-bottom p {
    width:100%
  }
  .site-footer {
    padding-top:42px
  }
  .page-intro {
    padding:24px 0 43px
  }
  .page-breadcrumb {
    margin-bottom:30px;
    font-size:10px
  }
  .page-intro-layout {
    display:block
  }
  .intro-symbol {
    display:none
  }
  .page-intro h1 {
    font-size:clamp(29px,8vw,40px)
  }
  .page-intro .page-subtitle {
    font-size:16px
  }
  .page-intro .page-description {
    font-size:14px
  }
  .isecure-site .section {
    padding:55px 0
  }
  .isecure-site .section-title {
    font-size:28px
  }
  .isecure-site .service-card,.isecure-site .tech-card,.isecure-site .feature-card {
    padding:28px 24px!important;
    min-height:0!important
  }
  .isecure-site .service-card h4 {
    font-size:20px!important
  }
  .isecure-site .contact-info-wrapper {
    padding:25px!important
  }
  .security-quote {
    padding:35px 25px
  }
  .isecure-site .security-quote h3 {
    font-size:23px
  }
  .isecure-site .security-quote p {
    font-size:16px
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto
  }
  .isecure-site *,.isecure-site *:before,.isecure-site *:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
}

/* The original page-header symbol returns as a quiet three-layer motion. */
.intro-symbol span { animation:intro-symbol-float 5s ease-in-out infinite alternate; transform-origin:center; }
.intro-symbol span:nth-child(2) { animation-delay:-1.6s; }
.intro-symbol span:nth-child(3) { animation-delay:-3.2s; }
@keyframes intro-symbol-float {
  from { transform:rotateX(50deg) rotateZ(-32deg) translate3d(0,3px,0); }
  to { transform:rotateX(50deg) rotateZ(-32deg) translate3d(0,-9px,12px); }
}
@media(max-width:640px) {
  .intro-symbol { display:block; height:125px; transform:scale(.68); transform-origin:right center; margin-top:18px; }
}
@media(prefers-reduced-motion:reduce) { .intro-symbol span { animation:none; } }
.collection-section {
  background:var(--surface)
}
.collection-flow {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  list-style:none;
  gap:24px;
  padding:0;
  margin:0
}
.collection-flow li {
  padding:28px;
  background:white;
  border:1px solid var(--line);
  border-radius:var(--radius)
}
.collection-flow li>span {
  font-size:10px;
  letter-spacing:.1em;
  color:var(--muted)
}
.collection-flow h3 {
  font-size:21px;
  margin:24px 0 15px
}
.collection-flow p {
  font-size:14px;
  margin:0
}
@media(max-width:640px) {
  .collection-flow {
    grid-template-columns:1fr
  }
}
.service-visual {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:60px;
  align-items:center;
  margin-top:55px;
  padding:0;
  background:#f5f5f2;
  border-radius:var(--radius);
  overflow:hidden
}
.service-visual img {
  display:block;
  width:100%;
  height:310px;
  object-fit:cover
}
.service-visual>div {
  padding:25px 40px 25px 0
}
.service-visual strong {
  display:block;
  font-size:28px;
  font-weight:700;
  letter-spacing:-.04em;
  margin:20px 0 10px
}
.service-visual p {
  font-size:15px
}
.site-navigation [aria-current=page]:not(.site-button) {
  color:var(--primary)
}
@media(max-width:640px) {
  .service-visual {
    grid-template-columns:1fr;
    gap:0;
    margin-top:30px
  }
  .service-visual img {
    height:auto;
    aspect-ratio:1.6
  }
  .service-visual>div {
    padding:25px
  }
  .service-visual strong {
    font-size:25px;
    margin-top:15px
  }
}
@media(max-width:900px) {
  html:not(.js) .header-inner {
    height:auto;
    flex-wrap:wrap;
    padding:20px 0;
    gap:18px
  }
  html:not(.js) .site-navigation {
    position:static;
    padding:0;
    border:0
  }
  html:not(.js) .menu-toggle {
    display:none
  }
}
.contact-map {
  width:100%;
  height:360px;
  background:var(--surface)
}
.map-fallback {
  height:100%;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  background-image:linear-gradient(#dce3e940 1px,transparent 1px),linear-gradient(90deg,#dce3e940 1px,transparent 1px);
  background-size:36px 36px
}
.map-fallback .eyebrow {
  margin:0 0 15px
}
.map-fallback h3 {
  margin:0 0 14px
}
.map-fallback p {
  font-size:14px;
  margin:0
}
.map-fallback .text-link {
  margin-top:13px
}
.isecure-site .tech-section .section-description {
  color:var(--text)!important;
  background:none!important
}
/* Content remains visible when OS motion reduction disables legacy entrance effects. */
.isecure-site .blog-list .col-12,.isecure-site .process-step {
  opacity:1;
  animation:none;
  transform:none
}
.isecure-site .nav-tabs-navigation {
  padding:30px 0 15px
}
.isecure-site .nav-tabs .form-inline {
  gap:8px;
  padding:5px 12px
}
.isecure-site .nav-tabs .form-control {
  width:160px
}
.isecure-site .nav-tabs .btn {
  margin:0
}
/* Service story: retain the same website and issue through all three steps. */
.service-story { --stage-color:#aa4a29; --stage-tint:#fff5ef; min-width:0; align-self:center; padding:14px 0; }
.story-heading { display:flex; justify-content:space-between; gap:14px; align-items:center; margin-bottom:18px; }
.story-heading>span { font-size:15px; font-weight:650; letter-spacing:-.02em; }
.story-heading small { font-size:10px; color:var(--muted); white-space:nowrap; border:1px solid var(--line); border-radius:4px; padding:3px 7px; }
.story-site { border:1px solid #cbd6df; border-radius:12px; background:#fff; box-shadow:0 16px 45px #132a420b; overflow:hidden; }
.story-browser-bar { display:flex; gap:15px; align-items:center; padding:12px 17px; background:#edf1f4; border-bottom:1px solid var(--line); font-size:11px; color:var(--text); }
.browser-dots { color:#b3bfca; letter-spacing:2px; font-size:8px; }
.story-site-status { margin-left:auto; font-size:10px; font-weight:650; color:var(--stage-color); }
.story-site-body { padding:24px; }
.story-site-nav { display:flex; justify-content:space-between; gap:10px; align-items:center; padding-bottom:19px; border-bottom:1px solid #edf0f3; }
.story-site-nav strong { font-size:10px; letter-spacing:.08em; }
.story-site-nav>span { font-size:9px; color:#758493; }
.story-website-layout { display:grid; grid-template-columns:1fr 145px; gap:20px; align-items:center; padding:29px 0; }
.story-tiny-label { font-size:8px; color:var(--muted); letter-spacing:.1em; }
.story-website-copy>strong { display:block; font-size:21px; line-height:1.5; letter-spacing:-.045em; margin:10px 0 16px; }
.story-skeleton { max-width:150px; }
.story-skeleton i { display:block; height:4px; background:#e5ebef; margin:6px 0; border-radius:2px; }
.story-skeleton i:last-child { width:65%; }
.story-target { position:relative; border:1px solid var(--stage-color); outline:1px solid color-mix(in srgb,var(--stage-color) 18%,transparent); border-radius:8px; padding:17px 8px 15px; text-align:center; background:var(--stage-tint); transition:background .25s,border-color .25s; }
.target-symbol { display:block; color:var(--ink); width:30px; height:30px; margin:0 auto 10px; }
.target-symbol svg { width:100%; height:100%; }
.story-target>strong { display:block; font-size:13px; }
.target-status { display:block; margin-top:5px; font-size:10px; font-weight:550; color:var(--stage-color); }
.target-marker { position:absolute; top:-10px; right:-8px; display:grid; place-items:center; width:24px; height:24px; border:3px solid white; border-radius:50%; background:var(--stage-color); color:white; font-size:12px; font-weight:700; }
.story-evidence { border-top:1px solid var(--line); padding-top:20px; min-height:155px; }
.evidence-label { display:block; font-size:10px; font-weight:650; color:var(--stage-color); margin-bottom:8px; }
.story-evidence>strong { display:block; font-size:17px; letter-spacing:-.03em; line-height:1.5; }
.isecure-site .story-evidence p { font-size:12px; margin:8px 0 16px; line-height:1.7; min-height:41px; }
.evidence-outcome { display:flex; gap:14px; font-size:11px; align-items:center; color:var(--text); }
.evidence-outcome>span:first-child { font-size:9px; padding:2px 6px; background:var(--surface); border:1px solid var(--line); border-radius:3px; }
.story-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:16px; }
.story-steps button { text-align:left; padding:12px 13px; border:1px solid var(--line); border-radius:6px; background:white; cursor:pointer; color:var(--muted); transition:background .2s,color .2s; }
.story-steps button>span { display:block; font-size:10px; }
.story-steps button strong { font-size:14px; font-weight:650; margin-left:6px; }
.story-steps small { display:block; font-size:10px; margin-top:5px; }
.story-steps button[aria-pressed=true] { background:var(--ink); color:white; border-color:var(--ink); }
.story-steps button:hover { border-color:var(--ink); }
.isecure-site .story-principle { font-size:11px; color:var(--muted); margin:15px 0 0; text-align:center; }
.service-story[data-stage=remediate] { --stage-color:#1e4e76; --stage-tint:#f0f5fa; }
.service-story[data-stage=manage] { --stage-color:#286557; --stage-tint:#f0f7f4; }
.story-nojs { font-size:12px!important; }
@media(max-width:1100px) { .story-site-body { padding:20px; } .story-website-layout { grid-template-columns:1fr 130px; gap:14px; } .story-website-copy>strong { font-size:19px; } .story-steps button { padding:11px 10px; } }
@media(min-width:641px) and (max-width:900px) { .hero-grid { grid-template-columns:1fr; } .hero-copy { max-width:620px; } .hero-actions { flex-direction:row; align-items:center; } .service-story { width:100%; max-width:580px; justify-self:center; margin-top:20px; } }
@media(max-width:640px) { .service-story { padding:6px 0 0; } .story-heading { margin-bottom:14px; } .story-heading>span { font-size:14px; } .story-heading small { font-size:9px; } .story-site-body { padding:18px; } .story-website-layout { grid-template-columns:1fr 125px; gap:12px; padding:24px 0; } .story-website-copy>strong { font-size:18px; } .story-evidence>strong { font-size:16px; } .story-steps { gap:6px; } .story-steps button { padding:11px 9px; } .story-steps small { font-size:9px; } .story-evidence { min-height:164px; } }
@media(max-width:360px) { .story-site-body { padding:14px; } .story-website-layout { grid-template-columns:1fr 112px; gap:8px; } .story-website-copy>strong { font-size:16px; } .story-site-nav>span { font-size:8px; } .story-heading>span { font-size:12px; } .target-status { font-size:9px; } .story-evidence>strong { font-size:15px; } .story-steps button strong { margin-left:3px; font-size:13px; } }
/* Service brochures: readable printed content on three dimensional paper. */
.service-brochures { min-width:0; padding:12px 0; align-self:center; }
.brochures-heading { display:flex; flex-direction:column; gap:10px; margin:0 0 20px; }
.brochures-heading>span { font-size:9px; letter-spacing:.12em; color:var(--muted); }
.brochures-heading>strong { font-size:20px; letter-spacing:-.04em; }
.brochure-stage { height:365px; position:relative; }
.brochure-deck { width:580px; height:365px; position:absolute; left:50%; top:0; transform:translateX(-50%); perspective:1400px; }
.service-book { position:absolute; top:22px; left:50%; width:210px; height:300px; transform-style:preserve-3d; border-radius:3px 9px 9px 3px; transition:transform .85s cubic-bezier(.22,.7,.2,1),width .85s cubic-bezier(.22,.7,.2,1); }
.service-book:after { content:''; position:absolute; bottom:-14px; left:10%; width:80%; height:15px; background:#12284025; filter:blur(13px); transform:rotateX(65deg); pointer-events:none; }
.service-book[data-position=left] { z-index:1; transform:translateX(calc(-50% - 157px)) translateZ(-80px) rotateY(24deg) rotateZ(-10deg) scale(.85); }
.service-book[data-position=right] { z-index:1; transform:translateX(calc(-50% + 157px)) translateZ(-80px) rotateY(-24deg) rotateZ(10deg) scale(.85); }
.service-book[data-position=center] { z-index:3; width:338px; transform:translateX(-50%) translateZ(20px) rotateY(-4deg) rotateZ(-2deg); }
.book-cover { position:absolute; inset:0 auto 0 0; width:100%; height:100%; display:flex; flex-direction:column; text-align:left; padding:18px 20px; color:#eef5fa; background:#1b3c57; border:0; border-radius:3px 7px 7px 3px; box-shadow:inset 4px 0 4px #ffffff16,inset 9px 0 9px #00000017,2px 3px 0 #c7d0d7,0 14px 30px #12284020; transform-origin:left center; transform:rotateY(0deg); transition:width .85s cubic-bezier(.22,.7,.2,1),transform .85s cubic-bezier(.22,.7,.2,1); cursor:pointer; overflow:hidden; }
.service-book.is-active .book-cover { width:50%; transform:rotateY(-10deg); border-radius:3px 0 0 3px; }
.book-brand { display:flex; justify-content:space-between; width:100%; font-size:14px; font-weight:650; letter-spacing:-.03em; }
.book-brand>span { font-size:9px; font-weight:400; opacity:.65; }
.book-category { font-size:7px; letter-spacing:.1em; opacity:.72; margin-top:18px; white-space:nowrap; }
.book-title { display:block; font-size:29px; font-weight:700; letter-spacing:-.05em; line-height:1.15; margin-top:8px; }
.book-art { width:100%; height:90px; flex:none; margin:4px 0; color:#adc5d7; }
.book-subtitle { font-size:9px; line-height:1.6; opacity:.85; }
.book-footer { font-size:9px; margin-top:auto; padding-top:12px; border-top:1px solid #ffffff30; display:flex; justify-content:space-between; width:100%; }
.book-inside { position:absolute; inset:0 0 0 auto; width:50%; border-radius:0 7px 7px 0; padding:27px 17px; background:linear-gradient(90deg,#e3e7e9,#fff 13%,#fafbf9); box-shadow:2px 3px 0 #c7d0d7,0 15px 30px #12284016; transform-origin:left center; transform:rotateY(-85deg); opacity:0; transition:transform .85s cubic-bezier(.22,.7,.2,1),opacity .35s; }
.service-book.is-active .book-inside { transform:rotateY(0); opacity:1; }
.book-kicker { display:block; font-size:6px; letter-spacing:.07em; color:var(--muted); }
.isecure-site .book-inside h3 { font-size:21px; letter-spacing:-.05em; margin:22px 0 23px; line-height:1.35; }
.book-inside ul { list-style:none; padding:0; margin:0; }
.book-inside li { font-size:9px; color:var(--text); border-top:1px solid var(--line); padding:9px 0; line-height:1.5; }
.book-inside li:before { content:'✓'; color:var(--primary); margin-right:5px; }
.book-inside-foot { display:block; font-size:8px; color:var(--muted); line-height:1.7; margin-top:17px; }
.book-assess .book-cover { background:#e9eff3; color:#173950; }
.book-assess .book-art { color:#466c87; }
.book-assess .book-footer { border-color:#b6c9d5; }
.book-safeweb .book-cover { background:#a85832; color:#fff6ef; }
.book-safeweb .book-art { color:#f0d2ba; }
.brochure-controls { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; position:relative; z-index:4; }
.brochure-controls button { padding:12px 6px; border:1px solid var(--line); border-radius:6px; background:white; color:var(--text); font-size:12px; font-weight:650; cursor:pointer; }
.brochure-controls button>span { font-size:9px; font-weight:400; margin-right:7px; opacity:.65; }
.brochure-controls button[aria-pressed=true] { color:#fff; background:var(--ink); border-color:var(--ink); }
.brochure-summary { min-height:103px; padding:18px 1px 12px; }
.isecure-site .brochure-summary p { font-size:13px; margin:0 0 7px; line-height:1.7; min-height:23px; }
.brochure-summary .text-link { font-size:12px; padding:5px 0; }
.brochure-connection { display:flex; align-items:center; justify-content:space-between; gap:8px; border-top:1px solid var(--line); padding-top:13px; color:var(--muted); font-size:10px; }
.brochure-connection i { font-style:normal; color:#a6b5c2; }
.brochure-play { flex-shrink:0; width:30px; height:28px; border:1px solid var(--line); border-radius:4px; background:#fff; color:var(--ink); cursor:pointer; }
.brochure-nojs { font-size:12px!important; }
@media(min-width:901px) and (max-width:1200px) { .brochure-deck { transform:translateX(-50%) scale(.8); transform-origin:top center; } .brochure-stage { height:295px; } }
@media(min-width:641px) and (max-width:900px) { .service-brochures { width:100%; max-width:580px; justify-self:center; margin-top:24px; } }
@media(max-width:640px) { .service-brochures { width:100%; padding:14px 0 0; } .brochures-heading { gap:8px; margin-bottom:16px; } .brochures-heading>strong { font-size:19px; } .brochures-heading>span { font-size:8px; } .brochure-deck { transform:translateX(-50%) scale(.65); transform-origin:top center; } .brochure-stage { height:237px; } .brochure-controls button { font-size:11px; padding:11px 4px; } .brochure-controls button>span { font-size:8px; margin-right:3px; } .brochure-summary { min-height:118px; } .isecure-site .brochure-summary p { font-size:12px; min-height:41px; } .brochure-connection { font-size:9px; gap:5px; } }
@media(max-width:360px) { .brochure-deck { transform:translateX(-50%) scale(.54); } .brochure-stage { height:202px; } .brochure-controls button { font-size:10px; } }
@media(prefers-reduced-motion:reduce) { .service-book,.book-cover,.book-inside { transition:none!important; } }
.service-book { height:320px; }
.book-inside { padding:22px 15px; }
.isecure-site .book-inside h3 { margin:18px 0; }
.book-inside li { padding:7px 0; }
.book-inside-foot { margin-top:12px; }

/* FlowGraph: a dimensional relationship map with readable, stable labels. */
.flow-scene { min-width:0; order:2; }
.flow-viewport { position:relative; height:600px; perspective:1100px; overflow:hidden; }
.flow-world { position:absolute; width:560px; height:500px; left:50%; top:65px; margin-left:-280px; transform-style:preserve-3d; transform:rotateX(16deg) rotateY(-12deg); animation:flow-drift 6s ease-in-out infinite alternate; }
.flow-plane { position:absolute; inset:60px 70px 35px; border:1px solid #bacbd980; border-radius:50%; background:radial-gradient(ellipse,#dce7ef90,transparent 68%); transform:translateZ(-35px); box-shadow:0 0 0 35px #c7d6e21a,0 0 0 70px #c7d6e211; }
.flow-connections { position:absolute; inset:0; width:560px; height:500px; transform:translateZ(12px); }
.flow-tracks { stroke:#9bb2c5; stroke-width:2; }
.flow-signals { stroke:#386c93; stroke-width:5; stroke-linecap:round; stroke-dasharray:28 160; animation:flow-signal 2s linear infinite; }
.flow-signals path:last-child { stroke:#a85832; }
.flow-node { position:absolute; width:142px; padding:15px 13px; background:linear-gradient(140deg,#fff,#edf2f6); border:1px solid #fff; border-radius:12px; box-shadow:4px 6px 0 #cbd7e1,12px 20px 24px #132a421a; transform:translateZ(28px); animation:flow-node-lift 3s ease-in-out infinite alternate; }
.flow-work { left:39px; top:32px; }
.flow-asset { left:379px; top:32px; animation-delay:-2s; }
.flow-risk { left:209px; top:376px; animation-delay:-4s; }
.flow-node-icon { display:inline-grid; place-items:center; width:27px; height:27px; border:1px solid #9aafc0; border-radius:7px; color:#274965; font-size:18px; font-weight:600; }
.flow-node-type { margin-left:8px; font-size:9px; letter-spacing:.1em; color:#63788c; }
.flow-node strong { display:block; margin:9px 0 3px; font-size:18px; color:#17364f; }
.flow-node small { display:block; font-size:10px; color:#516779; white-space:nowrap; }
.flow-risk .flow-node-icon { color:#a85832; border-color:#c69880; }
.flow-core { position:absolute; left:184px; top:210px; width:192px; padding:18px 10px; border:1px solid #54718a; border-radius:16px; text-align:center; color:#fff; background:linear-gradient(135deg,#2d516d,#132a42); transform:translateZ(35px); box-shadow:5px 8px 0 #0c2132,16px 28px 35px #132a4238; }
.flow-core-mark { display:block; font-size:8px; font-weight:600; letter-spacing:.1em; margin-bottom:9px; color:#b3cbdc; }
.flow-core-mark>span { color:#8db5cf; }
.flow-core strong { display:block; font-size:21px; letter-spacing:-.03em; }
.flow-core small { display:block; margin-top:7px; font-size:10px; color:#c2d5e3; }
.flow-relation { position:absolute; font-size:10px; color:#5d7487; transform:translateZ(3px); }
.relation-one { left:74px; top:207px; }
.relation-two { left:405px; top:207px; }
.relation-three { left:301px; top:338px; }
.flow-caption { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 20px 0; color:#526b80; }
.flow-caption>span { font-size:9px; letter-spacing:.12em; }
.flow-caption i { display:inline-block; width:6px; height:6px; border-radius:50%; background:#527d99; margin-right:7px; }
.flow-motion { border:1px solid #c0ced9; background:transparent; color:#425c73; border-radius:5px; padding:6px 9px; font:inherit; font-size:11px; cursor:pointer; }
.flow-motion[hidden] { display:none; }
.flow-world,.flow-node,.flow-signals { animation-play-state:paused; }
.is-running .flow-world,.is-running .flow-node,.is-running .flow-signals { animation-play-state:running; }
@keyframes flow-drift { from { transform:rotateX(22deg) rotateY(-16deg) translateY(-8px); } to { transform:rotateX(4deg) rotateY(12deg) translateY(8px); } }
@keyframes flow-node-lift { from { transform:translateZ(20px) translateY(6px); } to { transform:translateZ(65px) translateY(-12px); } }
@keyframes flow-signal { to { stroke-dashoffset:-188; } }
@media (min-width:901px) and (max-width:1200px) { .flow-world { scale:.8; transform-origin:center center; } .flow-viewport { height:550px; } }
@media (max-width:640px) { .flow-world { scale:.65; transform-origin:center top; top:45px; } .flow-viewport { height:415px; } .flow-caption { padding:0; } }
@media (max-width:360px) { .flow-world { scale:.53; } .flow-viewport { height:350px; } .flow-caption>span { font-size:8px; } }
@media (prefers-reduced-motion:reduce) { .flow-world,.flow-node,.flow-signals { animation:none; } }
@media (min-width:641px) and (max-width:900px) { .flowgraph-section .feature-grid { grid-template-columns:1fr; } }
@media (max-width:640px) {
  .flow-world { scale:.58; animation-name:flow-drift-mobile; }
  .flow-node { animation-name:flow-node-mobile; }
}
@media (max-width:360px) { .flow-world { scale:.47; } }
@keyframes flow-drift-mobile { from { transform:rotateX(12deg) rotateY(-10deg) translateY(-8px); } to { transform:rotateX(3deg) rotateY(8deg) translateY(8px); } }
@keyframes flow-node-mobile { from { transform:translateZ(10px) translateY(6px); } to { transform:translateZ(24px) translateY(-12px); } }
@media (prefers-reduced-motion:reduce) { .flow-world,.flow-node { animation:none; } }
/* Shared detail-page visual: the original AVAL security core. */
.page-intro-layout { grid-template-columns:minmax(0,1fr) 320px; }
.page-motion { padding:0; border-radius:18px; overflow:hidden; background:#f3f5f7; width:320px; }
.page-motion .motion-stage { width:100%; aspect-ratio:1; }
.page-motion .motion-pause { position:absolute; right:12px; bottom:12px; width:30px; height:30px; font-size:12px; }
.page-motion .motion-pause[hidden] { display:none; }
@media(max-width:900px) { .page-intro-layout { grid-template-columns:minmax(0,1fr) 240px; gap:24px; } .page-motion { width:240px; } }
@media(max-width:640px) { .page-intro-layout { grid-template-columns:1fr; } .page-motion { width:min(100%,280px); justify-self:center; } }
@media(prefers-reduced-motion:reduce) {
  .page-motion.motion-ready aval-player { opacity:0; }
  .page-motion.motion-ready #motion-poster { opacity:1; }
  .page-motion .motion-pause { display:none; }
}