@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;600&family=IBM+Plex+Sans+KR:wght@300;400;600&display=swap");

:root{
  --primary:#0f62fe;
  --primary-hover:#0050e6;
  --primary-pressed:#002d9c;
  --on-primary:#ffffff;
  --ink:#161616;
  --ink-muted:#525252;
  --ink-subtle:#8c8c8c;
  --canvas:#ffffff;
  --surface-1:#f4f4f4;
  --surface-2:#e0e0e0;
  --inverse-canvas:#161616;
  --inverse-surface-1:#262626;
  --inverse-ink:#ffffff;
  --inverse-ink-muted:#c6c6c6;
  --hairline:#e0e0e0;
  --hairline-strong:#161616;
  --semantic-error:#da1e28;
  --max:1584px;
  --page-gutter:max(32px,calc((100vw - var(--max))/2 + 32px));
  --text-max:1056px;
  --nav-h:48px;
  --ease:cubic-bezier(.2,0,.38,.9);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--canvas)}
body{
  margin:0;
  font-family:"IBM Plex Sans KR","IBM Plex Sans","Pretendard","Helvetica Neue",Arial,sans-serif;
  color:var(--ink);
  background:var(--canvas);
  font-size:16px;
  line-height:1.5;
  letter-spacing:.16px;
  word-break:keep-all;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{display:block;width:100%;height:100%;object-fit:cover}
main{overflow:hidden;padding-top:var(--nav-h)}
::selection{background:#d0e2ff;color:var(--ink)}
[hidden]{display:none!important}

.site-header{
  position:fixed;
  inset:0 0 auto;
  z-index:1000;
  background:var(--canvas);
  color:var(--ink);
  border-bottom:0;
}
.site-header:after{
  content:"";
  position:absolute;
  left:var(--page-gutter);
  right:var(--page-gutter);
  bottom:0;
  height:1px;
  background:var(--hairline);
  pointer-events:none;
}
.nav-shell{
  height:var(--nav-h);
  width:100%;
  padding:0 var(--page-gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  min-height:var(--nav-h);
  color:var(--ink);
  font-size:14px;
  line-height:1.29;
  font-weight:600;
}
.brand-logo{
  width:24px;
  height:auto;
  aspect-ratio:61.25/63.88;
  object-fit:contain;
  flex:0 0 auto;
}
.main-nav{
  height:var(--nav-h);
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  margin-left:auto;
  color:var(--ink-muted);
  font-size:14px;
  line-height:1.29;
}
.main-nav>a,
.nav-item>a{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:var(--nav-h);
  padding:0 16px;
  color:inherit;
  transition:background .16s var(--ease),color .16s var(--ease);
}
.main-nav>a:hover,
.main-nav>a:focus-visible,
.nav-item.open>a,
.nav-item:hover>a,
.nav-item>a:focus-visible{
  color:var(--ink);
  background:var(--surface-1);
  outline:0;
}
.main-nav>a:after,
.nav-item>a:after{
  content:"";
  position:absolute;
  left:16px;
  right:16px;
  bottom:0;
  height:2px;
  background:var(--primary);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .16s var(--ease);
}
.main-nav>a:hover:after,
.main-nav>a:focus-visible:after,
.nav-item.open>a:after,
.nav-item:hover>a:after,
.nav-item>a:focus-visible:after{transform:scaleX(1)}
.nav-item{
  position:static;
  height:var(--nav-h);
  display:flex;
  align-items:center;
}
.nav-cta{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:48px;
  min-width:156px;
  padding:12px 16px;
  border:1px solid var(--primary);
  background:var(--primary);
  color:var(--on-primary);
  font-size:14px;
  line-height:1.29;
  font-weight:400;
  transition:background .16s var(--ease),border-color .16s var(--ease);
}
.nav-cta:after,
.btn:after{
  content:"";
  width:8px;
  height:8px;
  border-top:1px solid currentColor;
  border-right:1px solid currentColor;
  transform:rotate(45deg);
  flex:0 0 auto;
}
.nav-cta:hover,
.nav-cta:focus-visible,
.btn.primary:hover,
.btn.primary:focus-visible{
  background:var(--primary-hover);
  border-color:var(--primary-hover);
  outline:2px solid var(--primary);
  outline-offset:2px;
}
.nav-cta:active,
.btn.primary:active{
  background:var(--primary-pressed);
  border-color:var(--primary-pressed);
}
.nav-toggle{display:none}
.main-nav > .mobile-nav-cta{display:none}

.mega-panel{
  position:absolute;
  top:var(--nav-h);
  left:0;
  right:0;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-8px);
  transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s var(--ease);
  background:var(--canvas);
  color:var(--ink);
  border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline-strong);
}
.mega-panel:before{
  content:"";
  position:absolute;
  top:-16px;
  left:0;
  right:0;
  height:16px;
}
.nav-item.open .mega-panel,
.nav-item:hover .mega-panel,
.nav-item:focus-within .mega-panel{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}
.mega-inner{
  padding:32px var(--page-gutter);
  display:grid;
  grid-template-columns:minmax(280px,4fr) minmax(0,12fr);
  gap:32px;
  max-height:calc(100vh - 96px);
  overflow:auto;
}
.mega-copy{
  padding:24px;
  background:var(--surface-1);
  border:1px solid var(--hairline);
}
.mega-kicker{
  display:block;
  margin-bottom:16px;
  color:var(--ink-muted);
  font-size:14px;
  line-height:1.29;
  font-weight:400;
  text-transform:none;
}
.mega-copy strong{
  display:block;
  font-size:24px;
  line-height:1.33;
  font-weight:400;
}
.mega-copy p{
  margin:16px 0 0;
  color:var(--ink-muted);
  font-size:16px;
  line-height:1.5;
}
.mega-links{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0;
  border-top:1px solid var(--hairline);
  border-left:1px solid var(--hairline);
}
.mega-links.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.mega-links a{
  min-height:112px;
  padding:24px;
  background:var(--canvas);
  border-right:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  transition:background .16s var(--ease),outline-color .16s var(--ease);
}
.mega-links a:hover,
.mega-links a:focus-visible{
  background:var(--surface-1);
  outline:2px solid var(--primary);
  outline-offset:-2px;
  outline:0;
}
.mega-links b{
  display:block;
  color:var(--ink);
  font-size:18px;
  line-height:1.35;
  font-weight:400;
}
.mega-links small{
  display:block;
  margin-top:8px;
  color:var(--ink-muted);
  font-size:14px;
  line-height:1.29;
}

.scroll-progress{
  position:fixed;
  top:var(--nav-h);
  left:var(--page-gutter);
  right:var(--page-gutter);
  height:3px;
  z-index:1001;
  background:transparent;
}
.scroll-progress span{
  display:block;
  height:100%;
  width:0;
  background:var(--primary);
}

.hero{
  min-height:calc(100svh - var(--nav-h));
  display:grid;
  grid-template-columns:minmax(0,7fr) minmax(360px,5fr);
  align-items:stretch;
  gap:0;
  padding:0 var(--page-gutter);
  background:var(--canvas);
  color:var(--ink);
  text-align:left;
  border-bottom:1px solid var(--hairline);
}
.hero-dark{
  background:var(--canvas);
  color:var(--ink);
}
.hero-copy{
  max-width:820px;
  padding:96px 48px 96px 0;
  align-self:center;
}
.hero h1{
  margin:0;
  font-size:clamp(42px,5.2vw,76px);
  line-height:1.17;
  font-weight:300;
  letter-spacing:-.5px;
}
.hero .lead{
  max-width:760px;
  margin:32px 0 0;
  color:var(--ink-muted);
  font-size:20px;
  line-height:1.4;
  font-weight:400;
}
.hero-dark .lead{color:var(--ink-muted)}
.eyebrow{
  display:block;
  margin-bottom:4px;
  color:var(--ink-muted);
  font-size:14px;
  line-height:1.29;
  font-weight:400;
  text-transform:none;
  letter-spacing:.16px;
}
.eyebrow:before{display:none}
.sup-point{
  display:inline-block;
  margin-left:4px;
  color:#242424;
  font-size:.54em;
  line-height:0;
  font-weight:600;
  vertical-align:super;
}
.hero-dark .eyebrow{color:var(--ink-muted)}
.hero-actions{
  display:flex;
  gap:0;
  flex-wrap:wrap;
  margin-top:40px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:32px;
  min-height:48px;
  min-width:176px;
  padding:12px 16px;
  border:1px solid transparent;
  background:var(--canvas);
  color:var(--primary);
  font:inherit;
  font-size:14px;
  line-height:1.29;
  font-weight:400;
  transition:background .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease),outline-color .16s var(--ease);
}
.btn:hover,
.btn:focus-visible{
  background:var(--surface-1);
  outline:2px solid var(--primary);
  outline-offset:2px;
}
.btn.primary{
  background:var(--primary);
  color:var(--on-primary);
  border-color:var(--primary);
}
.btn.ghost{
  color:var(--primary);
  border-color:var(--primary);
  background:var(--canvas);
}
.hero-dark .btn.ghost{
  color:var(--primary);
  border-color:var(--primary);
}
.btn.light{
  background:var(--canvas);
  color:var(--primary);
  border-color:var(--canvas);
}
.chip-row{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:0;
  margin-top:48px;
  border-top:1px solid var(--hairline);
  border-left:1px solid var(--hairline);
}
.chip-row span{
  min-height:56px;
  display:flex;
  align-items:center;
  padding:16px;
  border-right:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  background:var(--canvas);
  color:var(--ink-muted);
  font-size:14px;
  line-height:1.29;
}
.hero-dark .chip-row span{
  color:var(--ink-muted);
  border-color:var(--hairline);
  background:var(--canvas);
}
.hero-visual{
  min-width:0;
  align-self:stretch;
  border-left:1px solid var(--hairline);
}
.visual-frame{
  margin:0;
  overflow:hidden;
  min-height:360px;
  background:var(--surface-1);
  border:1px solid var(--hairline);
}
.hero .visual-frame{
  min-height:100%;
  height:100%;
  border:0;
  background:var(--surface-1);
}
.story-image{min-height:520px}
.visual-frame img{
  filter:saturate(.92) contrast(1.02);
  transition:filter .2s var(--ease),transform .2s var(--ease);
}
.visual-frame:hover img{filter:saturate(1) contrast(1.06)}

.section{
  padding:96px var(--page-gutter);
  background:var(--canvas);
  border-bottom:1px solid var(--hairline);
}
.section-head{
  max-width:var(--text-max);
  margin:0 0 48px;
  text-align:left;
}
.section-head h2{
  margin:0;
  font-size:clamp(36px,4vw,60px);
  line-height:1.17;
  font-weight:300;
  letter-spacing:-.4px;
}
.section-head p{
  max-width:900px;
  margin:24px 0 0;
  color:var(--ink-muted);
  font-size:18px;
  line-height:1.5;
}
.intro-band,
.soft-section,
.story-section{background:var(--surface-1)}
.dark-section{
  background:var(--canvas);
  color:var(--ink);
}
.dark-section .section-head p,
.dark-section .info-card p,
.dark-section .hex-card p{color:var(--ink-muted)}
.dark-section .eyebrow{color:var(--ink-muted)}

.card-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  max-width:var(--max);
  margin:0;
  border-top:1px solid var(--hairline);
  border-left:1px solid var(--hairline);
}
.card-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.card-grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.info-card{
  position:relative;
  min-height:240px;
  padding:24px;
  background:var(--canvas);
  border-right:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  transition:background .16s var(--ease),outline-color .16s var(--ease);
}
.info-card:hover,
.info-card:focus-within{
  background:var(--surface-1);
  outline:2px solid var(--primary);
  outline-offset:-2px;
}
.dark-section .info-card{
  background:var(--canvas);
  border-color:var(--hairline);
}
.info-card h3{
  margin:0 0 16px;
  font-size:24px;
  line-height:1.33;
  font-weight:400;
  letter-spacing:0;
}
.info-card p{
  margin:0;
  color:var(--ink-muted);
  font-size:16px;
  line-height:1.5;
}
.card-num{
  position:absolute;
  right:24px;
  bottom:24px;
  color:var(--ink-subtle);
  font-size:12px;
  line-height:1.33;
  font-weight:400;
}
.text-link,
.stack-list a{
  display:inline-flex;
  align-items:center;
  gap:24px;
  margin-top:24px;
  color:var(--primary);
  font-size:14px;
  line-height:1.29;
  font-weight:400;
}
.text-link:after,
.stack-list a:after{
  content:"";
  width:8px;
  height:8px;
  border-top:1px solid currentColor;
  border-right:1px solid currentColor;
  transform:rotate(45deg);
}

.split-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:0;
  max-width:var(--max);
  margin:0;
  border-top:1px solid var(--hairline);
  border-left:1px solid var(--hairline);
}
.split-grid > *{
  border-right:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
}
.split-grid .visual-frame{height:100%;border:0}
.stack-list{
  display:grid;
  gap:0;
}
.stack-list article{
  padding:24px;
  border-bottom:1px solid var(--hairline);
  background:var(--canvas);
  transition:background .16s var(--ease),outline-color .16s var(--ease);
}
.stack-list article:hover{
  background:var(--surface-1);
  outline:2px solid var(--primary);
  outline-offset:-2px;
}
.stack-list article:last-child{border-bottom:0}
.stack-list b{
  font-size:24px;
  line-height:1.33;
  font-weight:400;
}
.stack-list p{
  margin:12px 0 0;
  color:var(--ink-muted);
}

.scroll-story{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:0;
  max-width:var(--max);
  margin:0;
  border:1px solid var(--hairline);
  background:var(--canvas);
}
.story-nav{
  position:sticky;
  top:calc(var(--nav-h) + 24px);
  align-self:start;
  display:grid;
  gap:0;
  border-right:1px solid var(--hairline);
}
.story-tab{
  appearance:none;
  min-height:64px;
  border:0;
  border-bottom:1px solid var(--hairline);
  background:var(--canvas);
  padding:16px 20px;
  text-align:left;
  font:inherit;
  font-size:14px;
  line-height:1.29;
  color:var(--ink-muted);
  cursor:pointer;
  transition:background .16s var(--ease),color .16s var(--ease),outline-color .16s var(--ease);
}
.story-tab span{
  display:block;
  margin-bottom:8px;
  color:var(--ink);
  font-size:12px;
  line-height:1.33;
  font-weight:600;
}
.story-tab.active,
.story-tab:hover,
.story-tab:focus-visible{
  color:var(--ink);
  background:var(--surface-1);
  outline:2px solid var(--primary);
  outline-offset:-2px;
  outline:0;
}
.story-stage{
  position:relative;
  overflow:hidden;
  min-height:640px;
  background:var(--surface-1);
}
.story-stage .visual-frame{
  min-height:640px;
  border:0;
}
.story-panels{
  position:absolute;
  right:0;
  bottom:0;
  width:min(560px,100%);
}
.story-panel{
  display:none;
  padding:32px;
  background:rgba(255,255,255,.96);
  border-top:1px solid var(--hairline);
  border-left:1px solid var(--hairline);
}
.story-panel.active{
  display:block;
  animation:fadeUp .22s var(--ease);
}
.story-panel small{
  color:var(--ink-muted);
  font-size:12px;
  line-height:1.33;
  font-weight:400;
}
.story-panel h3{
  margin:12px 0;
  font-size:32px;
  line-height:1.25;
  font-weight:400;
}
.story-panel p{
  margin:0;
  color:var(--ink-muted);
}

.hex-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  max-width:var(--max);
  margin:0;
  border-top:1px solid var(--hairline);
  border-left:1px solid var(--hairline);
}
.hex-card{
  min-height:260px;
  padding:32px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  background:var(--canvas);
  border-right:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  color:var(--ink);
  transition:background .16s var(--ease),outline-color .16s var(--ease);
}
.hex-card:hover,
.hex-card:focus-visible{
  background:var(--surface-1);
  outline:2px solid var(--primary);
  outline-offset:-2px;
  outline:0;
}
.hex-card span{
  color:var(--ink-subtle);
  font-size:12px;
  line-height:1.33;
  font-weight:400;
}
.hex-card b{
  margin:24px 0 12px;
  font-size:24px;
  line-height:1.33;
  font-weight:400;
}
.hex-card p{margin:0;color:var(--ink-muted)}

.table-wrap{
  overflow:auto;
  max-width:var(--max);
  margin:0;
  border:1px solid var(--hairline);
  background:var(--canvas);
}
table{
  width:100%;
  min-width:760px;
  border-collapse:collapse;
}
th,
td{
  text-align:left;
  vertical-align:top;
  padding:16px;
  border-bottom:1px solid var(--hairline);
}
th{
  color:var(--ink);
  background:var(--surface-1);
  font-size:14px;
  line-height:1.29;
  font-weight:600;
}
td{
  color:var(--ink);
  font-size:16px;
  line-height:1.5;
}
tr:last-child td{border-bottom:0}
td strong{
  color:var(--ink);
  font-weight:600;
}
td a{
  color:var(--primary);
  font-weight:400;
}

.question-list{
  max-width:var(--max);
  margin:0;
  padding:0;
  border:1px solid var(--hairline);
  background:var(--canvas);
}
.question-list ol{
  margin:0;
  padding:0;
  list-style-position:inside;
}
.question-list li{
  padding:16px 24px;
  border-bottom:1px solid var(--hairline);
  font-size:16px;
}
.question-list li:last-child{border-bottom:0}
.contact-form{
  display:grid;
  gap:0;
  padding:0;
  background:var(--canvas);
  border:1px solid var(--hairline);
}
label{
  display:grid;
  gap:8px;
  padding:16px;
  border-bottom:1px solid var(--hairline);
  color:var(--ink);
  font-size:14px;
  line-height:1.29;
  font-weight:600;
}
label:last-child{border-bottom:0}
input,
textarea,
select{
  width:100%;
  min-height:48px;
  border:0;
  border-bottom:1px solid var(--ink-subtle);
  padding:11px 16px;
  font:inherit;
  background:var(--surface-1);
  color:var(--ink);
}
textarea{resize:vertical}
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:0;
  border-bottom-color:var(--primary);
}
.contact-panel{
  padding:32px;
  background:var(--inverse-canvas);
  color:var(--inverse-ink);
}
.contact-panel h3{
  margin:0 0 24px;
  font-size:32px;
  line-height:1.25;
  font-weight:400;
}
.contact-panel a{color:var(--inverse-ink)}
.field-trap{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  overflow:hidden;
}
.form-status{
  min-height:24px;
  margin:0;
  padding:14px 16px;
  color:var(--ink-muted);
  font-size:14px;
  line-height:1.45;
  border-bottom:1px solid var(--hairline);
}
.form-status[data-state="success"]{color:#126b36}
.form-status[data-state="error"]{color:#a32323}
.form-status[data-state="pending"]{color:var(--primary)}
.btn:disabled{
  cursor:not-allowed;
  opacity:.55;
}
.icon-btn{
  position:relative;
  width:48px;
  height:48px;
  display:inline-grid;
  place-items:center;
  flex:0 0 auto;
  border:1px solid var(--hairline);
  background:var(--canvas);
  color:var(--ink);
  cursor:pointer;
  transition:background .16s var(--ease),border-color .16s var(--ease),outline-color .16s var(--ease),transform .12s var(--ease);
}
.icon-btn:hover,
.icon-btn:focus-visible{
  background:var(--surface-1);
  border-color:var(--primary);
  outline:2px solid var(--primary);
  outline-offset:2px;
}
.icon-btn:active{transform:scale(.96)}
.icon-btn[data-tooltip]:hover:after,
.icon-btn[data-tooltip]:focus-visible:after,
.icon-btn.tooltip-open[data-tooltip]:after,
.toolbar-icon-action[data-tooltip]:hover:after,
.toolbar-icon-action[data-tooltip]:focus-visible:after,
.toolbar-icon-action.tooltip-open[data-tooltip]:after{
  content:attr(data-tooltip);
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  z-index:10;
  display:block;
  width:max-content;
  height:auto;
  max-width:160px;
  padding:6px 8px;
  border:0;
  transform:none;
  box-shadow:0 8px 20px rgba(0,0,0,.18);
  background:var(--inverse-canvas);
  color:var(--inverse-ink);
  font-size:12px;
  line-height:1.33;
  text-align:center;
  white-space:nowrap;
}
.admin-svg-icon{
  width:22px;
  height:22px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.admin-svg-icon circle{
  fill:currentColor;
  stroke:none;
}
.admin-svg-icon rect{
  fill:none;
}
.icon-pattern{
  width:22px;
  height:22px;
  background:
    radial-gradient(circle at 2px 2px,currentColor 0 2px,transparent 2.5px),
    radial-gradient(circle at 11px 2px,currentColor 0 2px,transparent 2.5px),
    radial-gradient(circle at 20px 2px,currentColor 0 2px,transparent 2.5px),
    radial-gradient(circle at 2px 11px,currentColor 0 2px,transparent 2.5px),
    radial-gradient(circle at 11px 11px,currentColor 0 2px,transparent 2.5px),
    radial-gradient(circle at 20px 11px,currentColor 0 2px,transparent 2.5px),
    radial-gradient(circle at 2px 20px,currentColor 0 2px,transparent 2.5px),
    radial-gradient(circle at 11px 20px,currentColor 0 2px,transparent 2.5px),
    radial-gradient(circle at 20px 20px,currentColor 0 2px,transparent 2.5px);
}
.icon-pin{
  position:relative;
  width:24px;
  height:24px;
  border:2px solid currentColor;
  border-radius:4px;
  background:var(--canvas);
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.18);
}
.icon-pin:before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:3px;
  height:3px;
  border-radius:50%;
  background:currentColor;
  transform:translate(-50%,-50%);
  box-shadow:
    -7px -7px 0 currentColor,
    0 -7px 0 currentColor,
    7px -7px 0 currentColor,
    -7px 0 0 currentColor,
    7px 0 0 currentColor,
    -7px 7px 0 currentColor,
    0 7px 0 currentColor,
    7px 7px 0 currentColor;
}
.icon-pin:after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--primary);
  opacity:0;
  transform:translate(-50%,-50%) scale(.7);
  transition:opacity .12s var(--ease),transform .12s var(--ease);
}
.icon-btn:hover .icon-pin,
.icon-btn:focus-visible .icon-pin{
  background:#f0f6ff;
}
.icon-btn:active .icon-pin{
  box-shadow:inset 0 2px 2px rgba(0,0,0,.18);
}
.icon-btn:active .icon-pin:after{
  opacity:.18;
  transform:translate(-50%,-50%) scale(1);
}
.toolbar-icon-action{
  position:relative;
  gap:10px;
  touch-action:manipulation;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.toolbar-icon-action:after{
  display:none;
}
.icon-refresh,
.icon-trash,
.icon-logout{
  position:relative;
  width:20px;
  height:20px;
  color:inherit;
}
.icon-refresh{
  border:2px solid currentColor;
  border-right-color:transparent;
  border-radius:50%;
  transform:rotate(-35deg);
}
.icon-refresh:after{
  content:"";
  position:absolute;
  right:-3px;
  top:0;
  width:7px;
  height:7px;
  border-top:2px solid currentColor;
  border-right:2px solid currentColor;
  transform:rotate(16deg);
}
.icon-trash{
  width:18px;
  height:18px;
  border:2px solid currentColor;
  border-top:0;
  border-radius:0 0 2px 2px;
}
.icon-trash:before{
  content:"";
  position:absolute;
  left:-3px;
  top:-5px;
  width:24px;
  height:2px;
  background:currentColor;
  border-radius:2px;
}
.icon-trash:after{
  content:"";
  position:absolute;
  left:5px;
  top:-9px;
  width:8px;
  height:5px;
  border:2px solid currentColor;
  border-bottom:0;
  border-radius:2px 2px 0 0;
}
.icon-logout{
  width:22px;
  height:18px;
}
.icon-logout:before{
  content:"";
  position:absolute;
  left:0;
  top:2px;
  width:12px;
  height:14px;
  border:2px solid currentColor;
  border-right:0;
  border-radius:2px 0 0 2px;
}
.icon-logout:after{
  content:"";
  position:absolute;
  right:0;
  top:50%;
  width:14px;
  height:2px;
  background:currentColor;
  transform:translateY(-50%);
  box-shadow:6px 0 0 -4px currentColor;
}
.icon-logout{
  background:
    linear-gradient(45deg,transparent 45%,currentColor 46% 56%,transparent 57%) right 3px center/8px 8px no-repeat,
    linear-gradient(-45deg,transparent 45%,currentColor 46% 56%,transparent 57%) right 3px center/8px 8px no-repeat;
}
.muted{color:var(--inverse-ink-muted)}
.industry-detail{border-top:1px solid var(--hairline)}
.cta-section{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:48px;
  margin:0;
  padding:48px var(--page-gutter);
  background:var(--primary);
  color:var(--on-primary);
  border:0;
}
.cta-section h2{
  margin:0;
  font-size:clamp(32px,3.4vw,42px);
  line-height:1.2;
  font-weight:300;
}
.cta-section p{
  max-width:780px;
  margin:16px 0 0;
  color:var(--on-primary);
  font-size:18px;
  line-height:1.5;
}
.cta-section .eyebrow{color:var(--on-primary)}
.cta-section .btn.primary,
.cta-section .btn.light{
  background:var(--canvas);
  color:var(--primary);
  border-color:var(--canvas);
}

.swatch-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  max-width:var(--max);
  margin:0;
  border-top:1px solid var(--hairline);
  border-left:1px solid var(--hairline);
}
.swatch-grid div{
  padding:16px;
  border-right:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);
  background:var(--canvas);
}
.swatch-grid span{
  display:block;
  height:98px;
  margin-bottom:16px;
  border:1px solid rgba(0,0,0,.08);
}
.swatch-grid b{display:block;font-weight:600}
.swatch-grid small{color:var(--ink-muted)}

.site-footer{
  background:var(--inverse-canvas);
  color:var(--inverse-ink-muted);
  padding:64px var(--page-gutter) 32px;
}
.footer-inner{
  display:grid;
  grid-template-columns:4fr repeat(3,3fr);
  gap:0;
  max-width:var(--max);
  margin:0;
  border-top:1px solid var(--inverse-surface-1);
  border-left:1px solid var(--inverse-surface-1);
}
.footer-inner > div{
  padding:24px;
  border-right:1px solid var(--inverse-surface-1);
  border-bottom:1px solid var(--inverse-surface-1);
}
.footer-brand{
  color:var(--inverse-ink);
  min-height:auto;
  gap:12px;
}
.footer-brand .brand-logo{width:28px}
.site-footer p{
  max-width:430px;
  color:var(--inverse-ink-muted);
  font-size:14px;
  line-height:1.5;
}
.footer-col{
  display:grid;
  gap:8px;
  align-content:start;
}
.footer-col strong{
  margin-bottom:12px;
  color:var(--inverse-ink);
  font-size:14px;
  line-height:1.29;
  font-weight:600;
}
.footer-col a,
.footer-col span{
  color:var(--inverse-ink-muted);
  font-size:14px;
  line-height:1.5;
}
.footer-col a:hover,
.footer-col a:focus-visible{
  color:var(--inverse-ink);
  outline:0;
}
.footer-bottom{
  max-width:var(--max);
  margin:32px 0 0;
  color:var(--inverse-ink-muted);
  font-size:12px;
  line-height:1.33;
}

.admin-page{
  min-height:100vh;
  background:var(--surface-1);
}
.admin-shell{
  min-height:100vh;
  padding:32px;
}
.admin-auth{
  min-height:calc(100vh - 64px);
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);
  gap:32px;
  align-items:stretch;
}
.admin-auth-copy,
.admin-auth-card,
.admin-workspace,
.admin-modal-card{
  background:var(--canvas);
  border:1px solid var(--hairline);
}
.admin-auth-copy{
  padding:48px;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.admin-auth-copy h1,
.admin-toolbar h1{
  margin:8px 0 16px;
  font-size:clamp(42px,7vw,88px);
  line-height:.98;
  font-weight:300;
}
.admin-auth-copy p{
  max-width:620px;
  color:var(--ink-muted);
  font-size:18px;
  line-height:1.55;
}
.admin-auth-card{
  padding:32px;
  align-self:center;
}
.admin-auth-card.auth-shake{
  animation:auth-card-reject .52s var(--ease);
}
.admin-auth-card h2,
.admin-settings h2,
.admin-modal-card h2{
  margin:0 0 12px;
  font-size:28px;
  line-height:1.2;
  font-weight:400;
}
.admin-help{
  margin:0 0 24px;
  color:var(--ink-muted);
}
.pattern-grid,
.keypad{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.pattern-grid{
  position:relative;
  padding:12px;
  touch-action:none;
  user-select:none;
}
.pattern-grid.compact{
  max-width:360px;
  margin:0 auto;
}
.pattern-lines{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  color:var(--primary);
  pointer-events:none;
  z-index:0;
}
.pattern-lines polyline{
  fill:none;
  stroke:currentColor;
  stroke-width:5;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.pattern-grid button,
.keypad button{
  min-height:64px;
  border:1px solid var(--hairline);
  background:var(--surface-1);
  color:var(--ink);
  font:inherit;
  font-size:22px;
  cursor:pointer;
  transition:background .16s var(--ease),color .16s var(--ease),border-color .16s var(--ease),outline-color .16s var(--ease),transform .12s var(--ease);
}
.pattern-grid button{
  position:relative;
  z-index:1;
  display:block;
  width:100%;
  max-width:88px;
  min-width:64px;
  min-height:auto;
  aspect-ratio:1;
  justify-self:center;
  border-radius:50%;
  color:transparent;
}
.pattern-grid button:before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--ink-subtle);
  transform:translate(-50%,-50%);
  transition:background .16s var(--ease),transform .16s var(--ease),box-shadow .16s var(--ease);
}
.pattern-grid button:hover,
.pattern-grid button:focus-visible,
.keypad button:hover,
.keypad button:focus-visible{
  outline:2px solid var(--primary);
  outline-offset:-2px;
  background:var(--canvas);
}
.pattern-grid button:active,
.keypad button:active{
  transform:scale(.98);
  background:#d0e2ff;
}
.pattern-grid button.active{
  border-color:var(--primary);
  background:#d0e2ff;
}
.pattern-grid button.active:before{
  background:var(--primary);
  transform:translate(-50%,-50%) scale(1.18);
  box-shadow:0 0 0 10px rgba(15,98,254,.14);
}
.keypad button{
  min-height:72px;
  border-radius:2px;
  font-size:26px;
  touch-action:manipulation;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.keypad button[data-pin-clear],
.keypad button[data-action-pin-clear],
.keypad button[data-pin-back],
.keypad button[data-action-pin-back]{
  font-size:20px;
  color:var(--ink-muted);
}
.admin-code-readout{
  margin:16px 0;
  padding:14px 16px;
  min-height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--surface-1);
  color:var(--ink-muted);
  border:1px solid var(--hairline);
  border-radius:1em;
  text-align:center;
}
.pin-dots{
  min-height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:0 0 16px;
}
.pin-dots span{
  width:12px;
  height:12px;
  border-radius:50%;
  border:1px solid var(--ink-subtle);
  background:transparent;
}
.pin-dots span.filled{
  border-color:var(--primary);
  background:var(--primary);
}
.admin-actions,
.admin-toolbar-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:16px;
}
.admin-actions{
  width:100%;
  align-items:stretch;
}
.admin-actions .btn{
  flex:1 1 0;
  min-width:0;
}
.admin-workspace{
  padding:24px;
}
.admin-toolbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:24px;
  padding-bottom:24px;
}
.admin-toolbar-actions{
  align-items:center;
}
.admin-table-wrap{
  overflow:auto;
  border:1px solid var(--hairline);
  background:var(--canvas);
}
.admin-table{
  width:100%;
  min-width:1040px;
  border-collapse:collapse;
}
.admin-table th,
.admin-table td{
  padding:14px 16px;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--hairline);
}
.admin-table th{
  color:var(--ink);
  font-size:13px;
  font-weight:600;
  background:var(--surface-1);
}
.admin-table td{
  color:var(--ink-muted);
  font-size:14px;
  line-height:1.45;
}
.admin-table td:nth-child(6){
  min-width:280px;
  color:var(--ink);
}
.admin-download-bar{
  display:flex;
  justify-content:flex-end;
  margin-top:16px;
}
.admin-excel-button{
  min-width:220px;
  justify-content:center;
  gap:10px;
  color:#217346;
  border-color:#217346;
}
.admin-excel-button:after{
  display:none;
}
.admin-excel-button:hover,
.admin-excel-button:focus-visible{
  background:#e9f5ee;
  color:#185c37;
  border-color:#185c37;
}
.admin-excel-button:disabled{
  color:#217346;
  border-color:#217346;
  background:var(--canvas);
  opacity:.48;
}
.admin-excel-button .admin-svg-icon{
  width:20px;
  height:20px;
  flex:0 0 auto;
}
.table-action{
  min-height:36px;
  padding:0 12px;
  border:1px solid var(--hairline);
  background:var(--canvas);
  color:var(--ink);
  cursor:pointer;
}
.danger,
.table-action.danger{color:#a32323}
.admin-settings{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:24px;
  margin-top:24px;
}
.admin-settings > div{
  border:1px solid var(--hairline);
  background:var(--canvas);
  padding:24px;
}
.admin-settings form{
  display:grid;
  gap:0;
}
.admin-modal{
  position:fixed;
  inset:0;
  z-index:80;
  display:grid;
  place-items:center;
  padding:20px;
  background:rgba(7,26,46,.5);
}
.admin-modal[hidden]{display:none}
.admin-modal-card{
  width:min(420px,100%);
  padding:24px;
  box-shadow:var(--shadow);
}
.admin-modal-card.settings-modal{
  position:relative;
  width:min(560px,100%);
}
.modal-close{
  position:absolute;
  top:16px;
  right:16px;
}
.settings-modal h2{
  padding-right:56px;
}
.settings-modal p{
  color:var(--ink-muted);
}
.settings-modal form{
  display:grid;
  gap:0;
  margin-top:16px;
}
.pattern-reset-panel{
  padding:16px;
  border-bottom:1px solid var(--hairline);
}

@keyframes auth-card-reject{
  0%{
    transform:translateX(0);
    background-color:var(--canvas);
  }
  14%{
    transform:translateX(-10px);
    background-color:#fff1f4;
  }
  28%{
    transform:translateX(9px);
    background-color:#ffe7ed;
  }
  42%{
    transform:translateX(-7px);
    background-color:#fff0f3;
  }
  58%{
    transform:translateX(5px);
    background-color:#fff7f8;
  }
  74%{
    transform:translateX(-3px);
    background-color:#fffafb;
  }
  100%{
    transform:translateX(0);
    background-color:var(--canvas);
  }
}

@media(max-width:820px){
  .admin-shell{padding:16px}
  .admin-auth{
    min-height:auto;
    grid-template-columns:1fr;
  }
  .admin-auth-copy,
  .admin-auth-card,
  .admin-workspace{padding:24px}
  .admin-workspace{
    min-height:calc(100svh - 32px);
    display:flex;
    flex-direction:column;
    padding:16px;
  }
  .admin-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    padding-bottom:16px;
  }
  .admin-toolbar > div:first-child{
    min-width:0;
    flex:1 1 auto;
  }
  .admin-toolbar .eyebrow{
    display:none;
  }
  .admin-toolbar h1{
    margin:0;
    font-size:18px;
    line-height:1.18;
    letter-spacing:0;
    white-space:nowrap;
  }
  .admin-toolbar-actions{
    flex:0 0 auto;
    flex-wrap:nowrap;
    justify-content:flex-end;
    gap:2px;
    margin-top:0;
  }
  .admin-toolbar-actions .icon-btn,
  .admin-toolbar-actions .toolbar-icon-action{
    width:36px;
    height:36px;
    min-width:36px;
    min-height:36px;
    padding:0;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    touch-action:manipulation;
    user-select:none;
    -webkit-tap-highlight-color:transparent;
  }
  .admin-toolbar-actions .toolbar-icon-action{
    flex:0 0 36px;
    border-color:var(--hairline);
    gap:0;
  }
  .admin-toolbar-actions .toolbar-icon-action:after,
  .admin-toolbar-actions .toolbar-action-label{
    display:none;
  }
  .admin-toolbar-actions .toolbar-icon-action > [class^="icon-"]{
    display:block;
  }
  .admin-toolbar-actions .toolbar-icon-action.danger{
    color:#a32323;
  }
  .admin-toolbar-actions .toolbar-icon-action.primary{
    color:var(--on-primary);
    border-color:var(--primary);
    background:var(--primary);
  }
  .admin-toolbar-actions .icon-pattern{
    width:18px;
    height:18px;
    background:
      radial-gradient(circle at 2px 2px,currentColor 0 1.8px,transparent 2.2px),
      radial-gradient(circle at 9px 2px,currentColor 0 1.8px,transparent 2.2px),
      radial-gradient(circle at 16px 2px,currentColor 0 1.8px,transparent 2.2px),
      radial-gradient(circle at 2px 9px,currentColor 0 1.8px,transparent 2.2px),
      radial-gradient(circle at 9px 9px,currentColor 0 1.8px,transparent 2.2px),
      radial-gradient(circle at 16px 9px,currentColor 0 1.8px,transparent 2.2px),
      radial-gradient(circle at 2px 16px,currentColor 0 1.8px,transparent 2.2px),
      radial-gradient(circle at 9px 16px,currentColor 0 1.8px,transparent 2.2px),
      radial-gradient(circle at 16px 16px,currentColor 0 1.8px,transparent 2.2px);
  }
  .admin-toolbar-actions .icon-pin{
    width:20px;
    height:20px;
  }
  .admin-download-bar{
    margin-top:auto;
    padding-top:16px;
  }
  .admin-excel-button{
    width:100%;
    min-width:0;
    min-height:56px;
    justify-content:center;
  }
  .admin-auth-actions{
    flex-wrap:nowrap;
  }
  .admin-auth-actions .btn{
    min-height:68px;
    padding-top:18px;
    padding-bottom:18px;
  }
  .admin-auth-actions [data-back-pattern]{
    flex-grow:.92;
  }
  .admin-auth-actions [data-pin-submit]{
    flex-grow:1.18;
  }
  .admin-settings{
    grid-template-columns:1fr;
  }
}

.reveal{opacity:1;transform:none}
.js-enabled .reveal{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .55s var(--ease),transform .55s var(--ease);
}
.js-enabled .reveal.in-view{
  opacity:1;
  transform:translateY(0);
}
.delay-1{transition-delay:.10s}
.delay-2{transition-delay:.18s}
@keyframes fadeUp{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}
}

@media(max-width:1056px){
  :root{--page-gutter:24px}
  .hero{
    grid-template-columns:1fr;
    min-height:auto;
    padding:0 var(--page-gutter);
  }
  .hero-copy{padding:72px 0 48px}
  .hero-visual{
    border-left:0;
    border-top:1px solid var(--hairline);
  }
  .hero .visual-frame{height:360px;min-height:0}
  .section{padding:80px var(--page-gutter)}
  .card-grid,
  .card-grid.four,
  .hex-grid,
  .swatch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split-grid,
  .footer-inner{grid-template-columns:1fr}
  .scroll-story{grid-template-columns:1fr}
  .story-nav{
    position:static;
    display:flex;
    overflow-x:auto;
    border-right:0;
    border-bottom:1px solid var(--hairline);
  }
  .story-tab{
    min-width:240px;
    flex:0 0 auto;
    border-right:1px solid var(--hairline);
  }
  .story-stage,
  .story-stage .visual-frame{min-height:540px}
  .cta-section{
    display:block;
    padding:48px var(--page-gutter);
  }
  .cta-section .btn{margin-top:32px}
}

@media(max-width:672px){
  :root{--page-gutter:20px}
  .brand span:last-child{font-size:13px}
  .nav-toggle{
    width:48px;
    height:48px;
    display:inline-grid;
    place-items:center;
    appearance:none;
    border:0;
    border-left:1px solid var(--hairline);
    background:var(--canvas);
    color:var(--ink);
    cursor:pointer;
  }
  .nav-toggle span{
    display:block;
    width:20px;
    height:1px;
    background:currentColor;
    transition:transform .18s var(--ease),opacity .18s var(--ease);
  }
  .nav-toggle span + span{margin-top:6px}
  body.nav-open .nav-toggle span:first-child{transform:translateY(3.5px) rotate(45deg)}
  body.nav-open .nav-toggle span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
  .main-nav{
    position:fixed;
    top:var(--nav-h);
    left:0;
    right:0;
    bottom:0;
    height:auto;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:0;
    padding:0;
    background:var(--canvas);
    color:var(--ink);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-8px);
    transition:opacity .18s var(--ease),transform .18s var(--ease),visibility .18s var(--ease);
    overflow:auto;
    border-top:1px solid var(--hairline);
  }
  body.nav-open .main-nav{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
  }
  .main-nav>a,
  .nav-item>a,
  .mobile-nav-cta{
    display:flex;
    align-items:center;
    width:100%;
    box-sizing:border-box;
    min-height:64px;
    padding:0 24px;
    border-bottom:1px solid var(--hairline);
    font-size:24px;
    line-height:1.25;
    font-weight:300;
  }
  .main-nav>a:after,
  .nav-item>a:after{display:none}
  .nav-item{
    display:block;
    width:100%;
    height:auto;
  }
  .mega-panel{
    position:static;
    display:none;
    width:100%;
    box-sizing:border-box;
    transform:none;
    border-top:0;
    border-bottom:1px solid var(--hairline);
    transition:none;
  }
  .mega-panel:before{display:none}
  .nav-item.open .mega-panel{
    display:block;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }
  .mega-inner{
    display:block;
    width:100%;
    box-sizing:border-box;
    padding:0;
    max-height:none;
    overflow:visible;
  }
  .mega-copy{display:none}
  .mega-links,
  .mega-links.three{
    display:grid;
    width:100%;
    box-sizing:border-box;
    grid-template-columns:1fr;
    border-top:0;
    border-left:0;
  }
  .mega-links a{
    width:100%;
    box-sizing:border-box;
    min-height:88px;
    padding:20px 24px 20px 40px;
    border-right:0;
    background:var(--surface-1);
  }
  .mega-links b{
    font-size:20px;
    line-height:1.3;
  }
  .mega-links small{
    font-size:15px;
    line-height:1.4;
  }
  .nav-cta{display:none}
  .main-nav > .mobile-nav-cta{
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    width:100%;
    margin-top:0;
    padding:12px 24px;
    border:0;
    border-bottom:1px solid var(--hairline);
    background:var(--primary);
    color:var(--on-primary);
    font-size:16px;
    line-height:1.5;
    font-weight:400;
  }
  .hero{padding:0 var(--page-gutter)}
  .hero-copy{padding:48px 0 32px}
  .hero h1{
    font-size:40px;
    line-height:1.14;
    overflow-wrap:anywhere;
  }
  .hero .lead{
    margin-top:24px;
    font-size:18px;
  }
  .hero-actions{display:grid}
  .btn{width:100%;min-width:0}
  .chip-row{display:none}
  .hero .visual-frame{height:220px}
  .section{padding:64px var(--page-gutter)}
  .section-head{margin-bottom:32px}
  .section-head h2{
    font-size:34px;
    line-height:1.2;
  }
  .section-head p{font-size:16px}
  .card-grid,
  .card-grid.two,
  .card-grid.four,
  .hex-grid,
  .swatch-grid{grid-template-columns:1fr}
  .visual-frame{min-height:280px}
  .story-panels{
    position:static;
    width:auto;
  }
  .story-panel{border-left:0}
  .story-panel:not(.active){display:none}
  .story-stage,
  .story-stage .visual-frame,
  .story-image{min-height:420px}
  .cta-section{padding:48px var(--page-gutter)}
}