:root{
  --color-primary:#00617D;
  --color-primary-hover:#004F67;
  --color-accent:#006F63;
  --color-accent-hover:#005B52;
  --color-ink:#172126;
  --color-muted:#59666D;
  --color-paper:#FAF9F6;
  --color-surface:#FFFFFF;
  --color-lav:#F0EAF7;
  --color-lav-ink:#30283A;
  --color-mint:#E7F3EC;
  --color-mint-ink:#18372D;
  --color-peach:#F8E8DE;
  --color-peach-ink:#422A22;
  --color-sand:#F5F0D8;
  --color-sand-ink:#363018;
  --color-blue:#E7EEF5;
  --color-blue-ink:#1D303D;
  --color-dark:#172126;
  --color-dark-muted:#B9C4C8;
  --line-paper:color-mix(in srgb,var(--color-ink) 12%,transparent);
  --line-dark:color-mix(in srgb,#FFFFFF 16%,transparent);
  --line-control:#AAB5BA;
  --font-heading:"Outfit",-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Hiragino Kaku Gothic ProN","Yu Gothic","Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  --font-body:"Manrope",-apple-system,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Hiragino Kaku Gothic ProN","Yu Gothic","Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  --font-mono:"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --text-xs:.75rem;
  --text-sm:.875rem;
  --text-base:1rem;
  --text-md:1.0625rem;
  --text-lg:1.25rem;
  --text-xl:1.35rem;
  --text-display:clamp(2.55rem,5.2vw,4rem);
  --leading-tight:1.18;
  --leading-heading:1.22;
  --leading-body:1.68;
  --space-1:.5rem;
  --space-2:1rem;
  --space-3:1.5rem;
  --space-4:2rem;
  --space-5:2.5rem;
  --space-6:4rem;
  --space-7:6rem;
  --space-8:7.5rem;
  --gutter:clamp(1rem,4vw,2rem);
  --container-narrow:46rem;
  --container-standard:78rem;
  --container-wide:88rem;
  --radius-sm:.75rem;
  --radius-md:1.25rem;
  --radius-lg:1.75rem;
  --radius-pill:999px;
  --shadow-soft:0 1.5rem 4.5rem rgba(38,35,47,.10),0 .3rem 1.1rem rgba(38,35,47,.05);
  --shadow-float:0 1.2rem 3rem rgba(23,33,38,.18);
  --transition:180ms cubic-bezier(.2,.7,.2,1);
  --hero-pad:5rem;
  --hero-crumb-pad:3rem;
  --section-pad:clamp(5rem,9vw,7.75rem);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:auto}
body{margin:0;background:var(--color-paper);color:var(--color-ink);font-family:var(--font-body);font-size:var(--text-base);line-height:var(--leading-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
main{overflow-x:clip}
img,svg,video,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit}
button{color:inherit}
h1,h2,h3,h4,h5,h6{margin:0;color:inherit;font-family:var(--font-heading);font-weight:560;line-height:var(--leading-heading);letter-spacing:-.03em;overflow-wrap:break-word}
h1{font-size:var(--text-display)}
h2{font-size:clamp(2rem,4vw,3rem)}
h3{font-size:var(--text-xl)}
h4{font-size:var(--text-lg)}
h5{font-size:var(--text-md)}
h6{font-size:var(--text-base)}
p{margin:0;font-size:var(--text-base);line-height:var(--leading-body)}
ul,ol{font-size:var(--text-base);line-height:var(--leading-body)}
li{font-size:var(--text-base);line-height:var(--leading-body)}
small{font-size:var(--text-xs);line-height:1.55}
figcaption{font-size:var(--text-sm);line-height:1.6}
blockquote{margin:0;font-size:var(--text-lg);line-height:1.55}
code{font-family:var(--font-mono);font-size:var(--text-sm);line-height:1.6}
pre{max-width:100%;overflow-x:auto;font-family:var(--font-mono);font-size:var(--text-sm);line-height:1.65}
th,td{font-size:var(--text-sm);line-height:1.55}
dt{font-size:var(--text-base);font-weight:750;line-height:1.5}
dd{margin:0;font-size:var(--text-sm);line-height:1.65}
label{font-size:var(--text-sm);line-height:1.45}
.container,.container-standard{width:min(calc(100% - var(--gutter)*2),var(--container-standard));margin-inline:auto}
.container-narrow{width:min(calc(100% - var(--gutter)*2),var(--container-narrow));margin-inline:auto}
.container-wide{width:min(calc(100% - var(--gutter)*2),var(--container-wide));margin-inline:auto}
.grid{display:grid;gap:var(--space-3)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.stack{display:flex;flex-direction:column;gap:var(--space-3)}
.cluster{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2)}
.section{padding-block:var(--section-pad)}
.section-sm{padding-block:var(--space-7)}
.section-lav{background:var(--color-lav);color:var(--color-lav-ink)}
.section-mint{background:var(--color-mint);color:var(--color-mint-ink)}
.section-peach{background:var(--color-peach);color:var(--color-peach-ink)}
.section-sand{background:var(--color-sand);color:var(--color-sand-ink)}
.section-blue{background:var(--color-blue);color:var(--color-blue-ink)}
.section-dark{background:#172126;color:#FFFFFF}
.section-dark p{color:#B9C4C8}
.section-head{max-width:53rem;margin:0 auto var(--space-5);text-align:center}
.section-head .c-kicker{margin-inline:auto}
.section-head h2{margin-top:var(--space-2)}
.section-head p{max-width:45rem;margin:var(--space-2) auto 0;color:var(--color-muted);font-size:var(--text-md)}
.section-lav .section-head p{color:#5D5267}
.section-mint .section-head p{color:#49645A}
.section-peach .section-head p{color:#695249}
.section-sand .section-head p{color:#5E5734}
.section-blue .section-head p{color:#526875}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.muted{color:var(--color-muted)}
.text-center{text-align:center}
.actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-2)}
.actions-center{justify-content:center}
.mt-1{margin-top:var(--space-1)}
.mt-2{margin-top:var(--space-2)}
.mt-3{margin-top:var(--space-3)}
.mt-4{margin-top:var(--space-4)}
.reveal{opacity:0;transform:translateY(1rem);transition:opacity 600ms ease,transform 600ms ease}
.reveal.reveal-left{transform:translateX(-1rem)}
.reveal.reveal-right{transform:translateX(1rem)}
.reveal.is-visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal,.reveal.reveal-left,.reveal.reveal-right{opacity:1;transform:none;transition:none}
}
@media(max-width:64rem){
  .grid-4,.grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:42rem){
  :root{--hero-pad:3.75rem;--section-pad:4.75rem}
  .grid-2,.grid-3,.grid-4{grid-template-columns:minmax(0,1fr)}
  .actions{align-items:stretch}
  .actions .c-btn{width:100%}
}