:root {
  --ink: #07161e;
  --ink-soft: #0e2530;
  --paper: #f4f1e9;
  --white: #fbfaf7;
  --muted: #6d787a;
  --line: rgba(7, 22, 30, 0.16);
  --mint: #a9f1d2;
  --aqua: #51d7cf;
  --blue: #8cbfff;
  --gold: #f0c768;
  --serif: "Iowan Old Style", "Baskerville", "Times New Roman", serif;
  --sans: "Pretendard Variable", Pretendard, "Noto Sans KR", Arial, sans-serif;
  --wrap: min(1240px, calc(100vw - 80px));
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; background: var(--ink); }
body { margin: 0; color: var(--ink); background: var(--white); font-family: var(--sans); font-size: 16px; line-height: 1.55; letter-spacing: -0.025em; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; }
.wrap { width: var(--wrap); margin: 0 auto; position: relative; }
.skip-link { position: fixed; z-index: 1000; left: 50%; top: -64px; transform: translateX(-50%); padding: 10px 18px; color: var(--ink); background: var(--mint); transition: top .2s ease; }
.skip-link:focus { top: 12px; }
.page-progress { position: fixed; top: 0; left: 0; z-index: 100; width: 100%; height: 3px; background: transparent; }
.page-progress span { display: block; width: 0; height: 100%; background: var(--mint); transition: width .08s linear; }

.site-header { position: absolute; z-index: 30; top: 0; left: 50%; width: var(--wrap); height: 100px; transform: translateX(-50%); display: flex; align-items: center; color: var(--white); border-bottom: 1px solid rgba(255,255,255,.17); }
.brand { display: inline-flex; gap: 11px; align-items: center; font-size: 15px; font-weight: 730; letter-spacing: .1em; }
.brand-mark { width: 24px; height: 24px; position: relative; display: inline-block; }
.brand-mark i { position: absolute; display: block; border-radius: 50%; background: var(--mint); }
.brand-mark i:nth-child(1) { left: 0; top: 7px; width: 9px; height: 9px; }
.brand-mark i:nth-child(2) { left: 8px; top: 2px; width: 11px; height: 11px; background: var(--aqua); }
.brand-mark i:nth-child(3) { right: 0; bottom: 2px; width: 7px; height: 7px; background: var(--blue); }
.desktop-nav { display: flex; align-items: center; gap: 36px; margin: 0 auto; font-size: 14px; font-weight: 520; letter-spacing: -.02em; }
.desktop-nav a { position: relative; opacity: .78; transition: opacity .2s ease; }
.desktop-nav a::after { content: ""; position: absolute; bottom: -7px; left: 0; width: 0; height: 1px; background: var(--mint); transition: width .25s ease; }
.desktop-nav a:hover { opacity: 1; }.desktop-nav a:hover::after { width: 100%; }
.header-cta { display: inline-flex; align-items: center; gap: 18px; padding: 10px 0 10px 17px; font-size: 13px; border-left: 1px solid rgba(255,255,255,.3); transition: color .2s ease; }.header-cta b { display: grid; place-items: center; width: 25px; height: 25px; color: var(--ink); background: var(--mint); border-radius: 50%; font-size: 14px; }.header-cta:hover { color: var(--mint); }
.menu-toggle, .mobile-menu { display: none; }

.section-dark { color: var(--white); background: var(--ink); }.section-ivory { background: var(--paper); }.section-light { background: var(--white); }
.hero { min-height: min(930px, 100svh); position: relative; display: flex; flex-direction: column; overflow: hidden; isolation: isolate; }
.hero::after { content: ""; position: absolute; z-index: -1; left: 0; bottom: 0; width: 100%; height: 250px; background: linear-gradient(0deg, rgba(7,22,30,.65), transparent); pointer-events: none; }
.hero-grid { position: absolute; inset: 0; z-index: -2; opacity: .38; background-image: linear-gradient(rgba(220,247,239,.065) 1px, transparent 1px), linear-gradient(90deg, rgba(220,247,239,.065) 1px, transparent 1px); background-size: 75px 75px; mask-image: linear-gradient(180deg, #000 0%, transparent 88%); }
.hero-glow { position: absolute; z-index: -1; border-radius: 50%; filter: blur(1px); mix-blend-mode: screen; pointer-events: none; }.hero-glow-one { width: 680px; height: 680px; right: -225px; top: -260px; background: radial-gradient(circle at 42% 55%, rgba(82,215,207,.2) 0 10%, rgba(35,83,124,.15) 34%, transparent 66%); }.hero-glow-two { width: 480px; height: 480px; right: 14%; top: 9%; background: radial-gradient(circle, rgba(87,122,221,.11), transparent 67%); }
.hero-layout { flex: 1; display: grid; grid-template-columns: 1.05fr .95fr; align-items: center; gap: 32px; padding: 165px 0 135px; }
.eyebrow, .kicker { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 11px; font-weight: 650; letter-spacing: .16em; }.eyebrow span { width: 18px; height: 1px; display: inline-block; background: currentColor; }.eyebrow.light, .light { color: var(--white); }
.hero-copy { position: relative; z-index: 1; }.hero h1 { margin: 29px 0 24px; max-width: 720px; color: var(--white); font-size: clamp(48px, 5.2vw, 84px); font-weight: 590; line-height: 1.1; letter-spacing: -.075em; }.hero h1 em { color: var(--mint); font-style: normal; }.hero-description { max-width: 465px; margin: 0; color: rgba(255,255,255,.71); font-size: clamp(16px, 1.4vw, 19px); line-height: 1.75; word-break: keep-all; }.hero-actions { display: flex; align-items: center; gap: 27px; margin-top: 37px; }.button { display: inline-flex; justify-content: center; align-items: center; gap: 28px; padding: 14px 17px 14px 19px; font-size: 13px; font-weight: 650; transition: transform .25s ease, color .25s ease, background .25s ease; }.button-light { color: var(--ink); background: var(--mint); }.button span { font-size: 17px; }.button:hover { transform: translateY(-3px); background: var(--aqua); }.text-link { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,.35); padding-bottom: 5px; transition: color .25s, border-color .25s; }.text-link:hover { color: var(--mint); border-color: var(--mint); }
.hero-visual { position: relative; width: min(100%, 540px); aspect-ratio: 1 / .93; justify-self: end; }.hero-visual::before { content: ""; position: absolute; inset: 12%; border-radius: 50%; border: 1px solid rgba(173,244,222,.16); box-shadow: 0 0 90px rgba(89,211,202,.1) inset; }.hero-visual::after { content: ""; position: absolute; left: 50%; top: 50%; width: 42%; aspect-ratio: 1; transform: translate(-50%,-50%); border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(200,255,231,.52), rgba(74,205,196,.14) 26%, rgba(15,41,56,.05) 65%, transparent 72%); filter: blur(4px); }.hero-visual canvas { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; }
.orbit { position: absolute; left: 50%; top: 50%; width: 74%; aspect-ratio: 1; border: 1px solid rgba(151,225,219,.25); border-radius: 50%; transform: translate(-50%,-50%) rotate(-21deg); }.orbit::after { content: ""; position: absolute; width: 8px; height: 8px; right: 8%; top: 5%; border-radius: 50%; background: var(--mint); box-shadow: 0 0 22px 5px rgba(169,241,210,.44); }.orbit-two { width: 98%; transform: translate(-50%,-50%) rotate(44deg); border-color: rgba(140,191,255,.2); }.orbit-two::after { width: 5px; height: 5px; top: auto; bottom: 9%; right: 10%; background: var(--blue); box-shadow: 0 0 18px 5px rgba(140,191,255,.42); }.visual-core { position: absolute; z-index: 2; top: 50%; left: 50%; display: grid; place-items: center; width: 30%; aspect-ratio: 1; transform: translate(-50%,-50%); border: 1px solid rgba(205,255,240,.48); border-radius: 50%; color: var(--white); background: rgba(17,63,73,.32); box-shadow: 0 0 44px rgba(104,228,208,.25), inset 0 0 26px rgba(137,242,215,.12); backdrop-filter: blur(8px); text-align: center; }.visual-core span { font-size: clamp(10px, 1.05vw, 13px); font-weight: 650; line-height: 1.38; letter-spacing: .15em; }
.signal-card { position: absolute; z-index: 3; display: flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 670; letter-spacing: .1em; }.signal-card b { display: grid; place-items: center; width: 26px; height: 26px; color: var(--ink); background: var(--mint); border-radius: 50%; font-size: 9px; }.signal-card i { display: block; width: 31px; height: 1px; background: rgba(255,255,255,.38); }.signal-card-a { top: 15%; right: 8%; }.signal-card-b { top: 42%; left: -3%; }.signal-card-b b { background: var(--aqua); }.signal-card-c { bottom: 17%; left: 6%; }.signal-card-c b { background: var(--gold); }.signal-card-d { bottom: 10%; right: 6%; }.signal-card-d b { background: var(--blue); }.visual-caption { position: absolute; right: 2%; bottom: -12px; color: rgba(255,255,255,.46); font-size: 9px; font-weight: 550; letter-spacing: .12em; }
.hero-footer { height: 80px; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.56); font-size: 10px; letter-spacing: .13em; }.hero-footer p { margin: 0; }.hero-footer p span { color: var(--mint); margin-left: 6px; }.hero-footer a { display: flex; align-items: center; gap: 10px; }.hero-footer a i { width: 28px; height: 1px; background: currentColor; position: relative; }.hero-footer a i::after { content: ""; position: absolute; right: 0; top: -1px; width: 4px; height: 4px; background: var(--mint); border-radius: 50%; }

.intro { padding: 170px 0 172px; }.intro-layout, .principles-layout { display: grid; grid-template-columns: 20% 1fr; gap: 6%; }.section-label { display: flex; align-items: center; gap: 13px; color: var(--ink); font-size: 11px; font-weight: 680; letter-spacing: .13em; }.section-label span { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid currentColor; border-radius: 50%; font-size: 10px; }.section-label p { margin: 0; }.section-label.light { color: var(--white); }.intro-content { max-width: 1000px; }.kicker { color: #637178; }.display { margin: 23px 0 0; font-size: clamp(41px, 5vw, 76px); font-weight: 490; line-height: 1.1; letter-spacing: -.075em; word-break: keep-all; }.display strong { color: #1e726d; font-family: var(--serif); font-style: italic; font-weight: 430; letter-spacing: -.07em; }.display.light { color: var(--white); }.display.light strong { color: var(--mint); }.intro-bottom { display: grid; grid-template-columns: minmax(300px, 540px) 60px; align-items: end; justify-content: space-between; gap: 35px; margin-top: 76px; }.intro-bottom p { max-width: 510px; margin: 0; color: #4c5b5e; font-size: 17px; line-height: 1.8; word-break: keep-all; }.round-arrow { display: grid; place-items: center; width: 60px; height: 60px; color: var(--white); background: var(--ink); border-radius: 50%; font-size: 23px; transition: transform .25s, background .25s; }.round-arrow:hover { background: #1d786f; transform: rotate(-15deg); }

.portfolio { padding: 142px 0 154px; }.section-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; }.section-intro { margin: 0; color: #546164; font-size: 16px; line-height: 1.7; text-align: right; word-break: keep-all; }.portfolio-heading, .roadmap-heading, .system-heading { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(270px, .55fr); align-items: end; gap: 50px; margin-top: 49px; }.portfolio-heading .display, .roadmap-heading .display, .system-heading .display { margin: 0; }.portfolio-heading > p, .roadmap-heading > p, .system-heading > p { margin: 0 0 5px; color: #657174; font-size: 16px; line-height: 1.75; word-break: keep-all; }.portfolio-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 85px; }.portfolio-card { position: relative; min-height: 415px; display: flex; flex-direction: column; padding: 24px; overflow: hidden; border: 1px solid rgba(7,22,30,.15); background: var(--white); transition: color .3s, background .3s, transform .35s, border .3s; }.portfolio-card::before { content: ""; position: absolute; top: -80px; right: -80px; width: 190px; height: 190px; border: 1px solid currentColor; border-radius: 50%; opacity: 0; transform: scale(.5); transition: opacity .4s, transform .4s; }.portfolio-card:hover { color: var(--white); background: var(--ink-soft); border-color: var(--ink-soft); transform: translateY(-8px); }.portfolio-card:hover::before { opacity: .18; transform: scale(1); }.card-top { display: flex; justify-content: space-between; align-items: center; color: #5d6b70; font-size: 10px; font-weight: 680; letter-spacing: .12em; }.portfolio-card:hover .card-top { color: rgba(255,255,255,.65); }.card-arrow { font-size: 17px; transition: transform .3s; }.portfolio-card:hover .card-arrow { transform: translate(4px,-4px); }.card-icon { width: 62px; margin-top: 74px; color: #1d6867; }.card-icon svg { width: 100%; height: auto; }.portfolio-card h3 { margin: 34px 0 10px; font-size: 25px; font-weight: 620; letter-spacing: -.055em; }.portfolio-card p { max-width: 230px; margin: 0; color: #647174; font-size: 14px; line-height: 1.7; word-break: keep-all; }.portfolio-card:hover p { color: rgba(255,255,255,.73); }.card-line { width: 100%; height: 4px; margin-top: auto; background: #175f62; transition: height .3s; }.portfolio-card:hover .card-line { height: 8px; }.finance .card-icon, .finance .card-line { color: #27639a; background-color: #27639a; }.finance .card-icon { background: transparent; }.software .card-icon, .software .card-line { color: #168d87; background-color: #168d87; }.software .card-icon { background: transparent; }.commerce .card-icon, .commerce .card-line { color: #ae7e21; background-color: #ae7e21; }.commerce .card-icon { background: transparent; }.content .card-icon, .content .card-line { color: #6f5fbd; background-color: #6f5fbd; }.content .card-icon { background: transparent; }

.system { position: relative; overflow: hidden; padding: 145px 0 110px; }.system .section-intro { color: rgba(255,255,255,.65); }.system-heading { margin-top: 49px; }.system-heading > p { color: rgba(255,255,255,.64); }.system-shape { position: absolute; pointer-events: none; border-radius: 50%; border: 1px solid rgba(169,241,210,.12); }.shape-a { width: 600px; height: 600px; top: -320px; left: -190px; }.shape-b { width: 460px; height: 460px; bottom: -280px; right: -100px; border-color: rgba(140,191,255,.13); }.cycle { position: relative; height: 440px; margin-top: 80px; }.cycle-path { position: absolute; inset: 18px 0 0; width: 100%; height: 82%; overflow: visible; }.cycle-path path { stroke: rgba(168,240,209,.32); stroke-width: 1.5; stroke-dasharray: 4 6; }.cycle-item { position: absolute; width: 230px; padding: 20px; color: var(--white); border-top: 1px solid rgba(255,255,255,.38); }.cycle-item::before { content: ""; position: absolute; left: -5px; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 7px rgba(169,241,210,.1); }.cycle-item span { color: var(--mint); font-size: 10px; font-weight: 700; letter-spacing: .12em; }.cycle-item h3 { margin: 8px 0 7px; font-family: var(--serif); font-size: 29px; font-weight: 400; font-style: italic; letter-spacing: -.03em; }.cycle-item p { margin: 0; color: rgba(255,255,255,.65); font-size: 13px; line-height: 1.65; }.cycle-1 { top: 10px; left: 3%; }.cycle-2 { top: 87px; left: 33%; }.cycle-3 { right: 14%; bottom: 22px; }.cycle-3::before { background: var(--blue); box-shadow: 0 0 0 7px rgba(140,191,255,.1); }.cycle-4 { left: 18%; bottom: 6px; }.cycle-4::before { background: var(--gold); box-shadow: 0 0 0 7px rgba(240,199,104,.1); }.system-note { display: flex; align-items: center; gap: 12px; padding: 17px 0 0; border-top: 1px solid rgba(255,255,255,.17); }.system-note p { margin: 0; color: rgba(255,255,255,.62); font-size: 12px; letter-spacing: .015em; }.pulse-dot { position: relative; width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 0 rgba(169,241,210,.6); animation: pulse 2.4s infinite; }

.principles { padding: 155px 0 164px; }.principles-copy .display { margin-top: 42px; }.principles-copy > p { max-width: 330px; margin: 34px 0 0; color: #5e6b6e; font-size: 16px; line-height: 1.75; word-break: keep-all; }.principles-list { border-top: 1px solid var(--line); }.principle { min-height: 130px; display: grid; grid-template-columns: 70px 1fr 32px; gap: 15px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--line); transition: padding .25s; }.principle:hover { padding-left: 13px; }.principle > span { color: #1b6f6a; font-size: 11px; font-weight: 700; letter-spacing: .11em; }.principle h3 { margin: 0; font-family: var(--serif); font-size: 28px; font-weight: 420; font-style: italic; letter-spacing: -.035em; }.principle p { margin: 8px 0 0; color: #677477; font-size: 14px; line-height: 1.65; word-break: keep-all; }.principle i { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 50%; color: #1a6863; font-size: 16px; font-style: normal; transition: transform .25s, background .25s; }.principle:hover i { transform: rotate(-20deg); color: var(--white); background: #1a6863; }

.roadmap { padding: 145px 0 115px; }.roadmap-line { position: relative; height: 65px; margin-top: 70px; border-top: 1px solid var(--line); }.roadmap-line::before, .roadmap-line::after { content: ""; position: absolute; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); }.roadmap-line::before { left: 0; }.roadmap-line::after { right: 0; }.roadmap-line span { position: absolute; left: 33.333%; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: #2b827c; box-shadow: calc(33.333vw - 20px) 0 0 #ae852d; }.roadmap-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }.roadmap-card { min-height: 410px; display: flex; flex-direction: column; padding: 29px; border: 1px solid var(--line); transition: box-shadow .3s, transform .3s; }.roadmap-card:hover { box-shadow: 0 18px 40px rgba(12,33,43,.08); transform: translateY(-6px); }.roadmap-number { display: flex; align-items: baseline; gap: 9px; }.roadmap-number span { color: #5f6e72; font-size: 10px; font-weight: 700; letter-spacing: .12em; }.roadmap-number b { color: #1a6e69; font-family: var(--serif); font-size: 43px; font-weight: 400; font-style: italic; line-height: 1; }.roadmap-card:nth-child(2) .roadmap-number b { color: #278b86; }.roadmap-card:nth-child(3) .roadmap-number b { color: #ae852d; }.roadmap-phase { margin: 46px 0 7px; color: #667579; font-size: 10px; font-weight: 700; letter-spacing: .15em; }.roadmap-card h3 { margin: 0; font-size: 23px; font-weight: 600; letter-spacing: -.055em; }.roadmap-card ul { display: grid; gap: 9px; margin: 23px 0; padding: 0; list-style: none; color: #59686c; font-size: 14px; }.roadmap-card li { position: relative; padding-left: 13px; }.roadmap-card li::before { content: ""; position: absolute; left: 0; top: .64em; width: 4px; height: 4px; border-radius: 50%; background: #23817c; }.roadmap-card footer { margin-top: auto; padding-top: 15px; border-top: 1px solid var(--line); }.roadmap-card footer span { color: #176661; font-size: 10px; font-weight: 700; letter-spacing: .12em; }.roadmap-card footer p { margin: 5px 0 0; color: #455356; font-size: 12px; }.roadmap-disclaimer { margin: 24px 0 0; color: #788386; font-size: 11px; }

.signal-strip { color: var(--white); background: #115c5c; }.signal-strip-inner { display: grid; grid-template-columns: 22% 1fr; align-items: stretch; min-height: 245px; }.signal-strip .eyebrow { align-self: center; }.signal-metrics { display: grid; grid-template-columns: repeat(3, 1fr); }.signal-metrics > div { display: flex; flex-direction: column; justify-content: center; padding: 34px; border-left: 1px solid rgba(255,255,255,.25); }.signal-metrics b { color: var(--mint); font-family: var(--serif); font-size: 33px; font-weight: 400; font-style: italic; }.signal-metrics p { margin: 10px 0 0; font-size: 15px; font-weight: 480; line-height: 1.55; word-break: keep-all; }

.contact { position: relative; overflow: hidden; padding: 152px 0; }.contact-glow { position: absolute; z-index: 0; width: 680px; height: 680px; right: -180px; top: -170px; border-radius: 50%; background: radial-gradient(circle, rgba(55,182,170,.23), rgba(47,113,128,.1) 35%, transparent 69%); }.contact-layout { display: grid; grid-template-columns: 1fr .82fr; gap: 110px; align-items: center; }.contact-copy { position: relative; z-index: 1; }.contact-copy .display { margin-top: 25px; }.contact-copy > p:last-child { max-width: 410px; margin: 30px 0 0; color: rgba(255,255,255,.65); font-size: 16px; line-height: 1.78; word-break: keep-all; }.contact-card { position: relative; min-height: 360px; display: flex; flex-direction: column; justify-content: space-between; padding: 32px; overflow: hidden; color: var(--ink); background: var(--mint); }.contact-card > p { position: relative; z-index: 1; margin: 0; font-size: 10px; font-weight: 740; letter-spacing: .12em; }.contact-email { position: relative; z-index: 1; display: inline-block; width: fit-content; font-family: var(--serif); font-size: clamp(32px, 3.2vw, 48px); font-style: italic; font-weight: 400; line-height: 1; letter-spacing: -.06em; border-bottom: 1px solid rgba(7,22,30,.5); transition: border-color .25s; }.contact-email:hover { border-color: var(--ink); }.contact-email span { font-family: var(--sans); font-size: .45em; vertical-align: top; }.copy-email { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 11px; width: fit-content; padding: 0; border: 0; background: none; cursor: pointer; font-size: 12px; font-weight: 600; }.copy-email i { font-size: 16px; font-style: normal; }.contact-orbit { position: absolute; right: -40px; bottom: -115px; width: 320px; aspect-ratio: 1; border: 1px solid rgba(7,22,30,.24); border-radius: 50%; transform: rotate(-25deg); }.contact-orbit::before, .contact-orbit::after, .contact-orbit span { content: ""; position: absolute; border: 1px solid rgba(7,22,30,.2); border-radius: 50%; }.contact-orbit::before { inset: 30px; }.contact-orbit::after { inset: 60px; }.contact-orbit span:first-child { left: 50%; top: 50%; width: 38px; height: 38px; transform: translate(-50%,-50%); background: var(--ink); border-color: var(--ink); }.contact-orbit span:nth-child(2) { top: 25px; right: 72px; width: 13px; height: 13px; background: var(--aqua); border-color: var(--aqua); }.contact-orbit span:nth-child(3) { bottom: 36px; left: 43px; width: 9px; height: 9px; background: var(--gold); border-color: var(--gold); }

.site-footer { padding-bottom: 23px; }.footer-top { display: flex; align-items: center; min-height: 130px; border-top: 1px solid rgba(255,255,255,.19); border-bottom: 1px solid rgba(255,255,255,.19); }.footer-brand { color: var(--white); }.footer-top > p { margin: 0 auto; color: rgba(255,255,255,.49); font-size: 10px; letter-spacing: .12em; }.back-top { display: inline-flex; align-items: center; gap: 10px; color: var(--mint); font-size: 10px; font-weight: 650; letter-spacing: .12em; }.back-top span { font-size: 16px; }.footer-bottom { display: flex; justify-content: space-between; gap: 40px; padding-top: 21px; color: rgba(255,255,255,.46); font-size: 10px; line-height: 1.6; }.footer-bottom p { margin: 0; }.footer-bottom p:last-child { max-width: 620px; text-align: right; }
.toast { position: fixed; z-index: 100; left: 50%; bottom: 28px; padding: 12px 17px; color: var(--white); background: #1a6f69; font-size: 13px; border-radius: 2px; box-shadow: 0 10px 25px rgba(0,0,0,.25); opacity: 0; pointer-events: none; transform: translate(-50%, 14px); transition: opacity .25s, transform .25s; }.toast.show { opacity: 1; transform: translate(-50%,0); }
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .75s cubic-bezier(.2,.65,.2,1), transform .75s cubic-bezier(.2,.65,.2,1); }.reveal.is-visible { opacity: 1; transform: translateY(0); }.portfolio-card.reveal, .roadmap-card.reveal { transition-delay: 0s; }.portfolio-card.reveal:nth-child(2), .roadmap-card.reveal:nth-child(2) { transition-delay: .09s; }.portfolio-card.reveal:nth-child(3), .roadmap-card.reveal:nth-child(3) { transition-delay: .18s; }.portfolio-card.reveal:nth-child(4) { transition-delay: .27s; }
.contact-card .contact-email { margin: auto 0 20px; border: 0; }
.contact-pending { position: relative; z-index: 1; margin: 0; }
.contact-pending span { display: block; font-size: 9px; font-weight: 700; letter-spacing: .13em; }
.contact-pending p { margin: 6px 0 0; font-size: 13px; line-height: 1.55; letter-spacing: -.025em; }
.contact-card-link { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 9px; width: fit-content; margin-top: 20px; padding-bottom: 4px; border-bottom: 1px solid rgba(7,22,30,.5); font-size: 12px; font-weight: 650; }
.contact-card-link span { font-size: 15px; transition: transform .2s; }
.contact-card-link:hover span { transform: translate(3px,-3px); }
.desktop-nav a[aria-current="page"] { color: var(--mint); opacity: 1; }
.desktop-nav a[aria-current="page"]::after { width: 100%; }

/* Corporate identity page */
.ci-hero { position: relative; min-height: min(850px, 100svh); overflow: hidden; isolation: isolate; }.ci-hero::after { content: ""; position: absolute; z-index: -1; left: 0; bottom: 0; width: 100%; height: 230px; background: linear-gradient(0deg, rgba(7,22,30,.6), transparent); }.ci-grid { position: absolute; z-index: -2; inset: 0; opacity: .32; background-image: linear-gradient(rgba(220,247,239,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(220,247,239,.06) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(180deg, #000 0%, transparent 92%); }.ci-hero-glow { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; }.ci-hero-glow-a { width: 720px; height: 720px; top: -310px; right: -170px; background: radial-gradient(circle, rgba(81,215,207,.22), rgba(59,113,171,.12) 36%, transparent 67%); }.ci-hero-glow-b { width: 480px; height: 480px; right: 34%; bottom: -280px; border: 1px solid rgba(169,241,210,.14); }.ci-hero-layout { min-height: calc(min(850px, 100svh) - 70px); display: grid; grid-template-columns: .9fr 1.1fr; align-items: center; gap: 45px; padding: 142px 0 90px; }.ci-hero-copy { position: relative; z-index: 1; }.ci-hero-copy h1 { max-width: 650px; margin: 29px 0 24px; font-size: clamp(48px, 5.3vw, 84px); font-weight: 580; line-height: 1.09; letter-spacing: -.075em; }.ci-hero-copy h1 em { color: var(--mint); font-family: var(--serif); font-style: italic; font-weight: 430; }.ci-hero-copy > p:not(.eyebrow) { max-width: 425px; margin: 0; color: rgba(255,255,255,.7); font-size: 17px; line-height: 1.8; word-break: keep-all; }.ci-hero-copy .button { margin-top: 36px; }.ci-mark-stage { position: relative; width: min(100%, 590px); aspect-ratio: 1; justify-self: end; }.ci-mark-stage svg { position: absolute; z-index: 2; inset: 10%; width: 80%; height: 80%; filter: drop-shadow(0 16px 60px rgba(7,22,30,.3)); }.ci-mark-stage::before { content: ""; position: absolute; z-index: 1; inset: 11%; border-radius: 50%; background: radial-gradient(circle, rgba(18,83,94,.32), rgba(7,22,30,0) 66%); }.ci-stage-ring { position: absolute; z-index: 0; left: 50%; top: 50%; border: 1px solid rgba(169,241,210,.22); border-radius: 50%; transform: translate(-50%,-50%) rotate(-21deg); }.ring-one { width: 72%; aspect-ratio: 1; }.ring-two { width: 96%; aspect-ratio: 1; border-color: rgba(140,191,255,.18); transform: translate(-50%,-50%) rotate(31deg); }.ci-stage-ring::after { content: ""; position: absolute; width: 9px; height: 9px; top: 8%; right: 13%; border-radius: 50%; background: var(--mint); box-shadow: 0 0 20px 5px rgba(169,241,210,.3); }.ring-two::after { width: 6px; height: 6px; top: auto; right: auto; bottom: 6%; left: 13%; background: var(--blue); box-shadow: 0 0 20px 5px rgba(140,191,255,.3); }.ci-stage-label { position: absolute; z-index: 3; color: rgba(255,255,255,.76); font-size: 10px; font-weight: 680; letter-spacing: .12em; }.ci-stage-label::before { content: ""; display: inline-block; width: 26px; height: 1px; margin: 0 8px 3px 0; background: currentColor; }.label-a { top: 18%; left: 0; }.label-b { top: 39%; right: -3%; }.label-c { bottom: 19%; left: 8%; }.ci-mark-stage > p { position: absolute; right: 2%; bottom: -4px; margin: 0; color: rgba(255,255,255,.45); font-size: 9px; font-weight: 650; letter-spacing: .13em; }.ci-hero-footer { height: 70px; display: flex; align-items: center; gap: 26px; border-top: 1px solid rgba(255,255,255,.17); color: rgba(255,255,255,.53); font-size: 9px; letter-spacing: .12em; }.ci-hero-footer a { display: flex; align-items: center; gap: 10px; margin-left: auto; }.ci-hero-footer a i { position: relative; width: 26px; height: 1px; background: currentColor; }.ci-hero-footer a i::after { content: ""; position: absolute; right: 0; top: -2px; width: 5px; height: 5px; border-radius: 50%; background: var(--mint); }
.ci-intro { padding: 156px 0 166px; }.ci-intro-layout { display: grid; grid-template-columns: 20% 1fr; gap: 6%; }.ci-intro-copy { display: grid; grid-template-columns: minmax(290px, 520px) 1fr; align-items: end; gap: 70px; margin-top: 73px; }.ci-intro-copy > p { margin: 0; color: #506064; font-size: 17px; line-height: 1.8; word-break: keep-all; }.ci-intro-copy dl { display: flex; gap: 42px; margin: 0; }.ci-intro-copy dt { color: #1e716c; font-family: var(--serif); font-size: 48px; font-weight: 400; font-style: italic; line-height: 1; }.ci-intro-copy dd { margin: 7px 0 0; color: #657276; font-size: 11px; letter-spacing: .08em; }
.ci-colors { padding: 142px 0 154px; }.ci-colors-heading { display: grid; grid-template-columns: minmax(0, 1.06fr) minmax(270px, .55fr); align-items: end; gap: 50px; margin-top: 49px; }.ci-colors-heading .display { margin: 0; }.ci-colors-heading > p { margin: 0 0 5px; color: #657174; font-size: 16px; line-height: 1.75; word-break: keep-all; }.ci-color-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 78px; }.ci-color-card { min-height: 370px; display: flex; flex-direction: column; justify-content: space-between; padding: 25px; overflow: hidden; color: var(--ink); border: 1px solid rgba(7,22,30,.12); transition: transform .3s, box-shadow .3s; }.ci-color-card:hover { transform: translateY(-7px); box-shadow: 0 20px 38px rgba(12,33,43,.1); }.ci-color-card.mint { background: #a9f1d2; }.ci-color-card.aqua { background: #51d7cf; }.ci-color-card.blue { background: #8cbfff; }.ci-color-dot { width: 78%; aspect-ratio: 1; margin: 5px auto auto; border: 1px solid rgba(7,22,30,.18); border-radius: 50%; position: relative; }.ci-color-dot::before, .ci-color-dot::after { content: ""; position: absolute; border: 1px solid rgba(7,22,30,.18); border-radius: 50%; }.ci-color-dot::before { inset: 16%; }.ci-color-dot::after { inset: 33%; }.ci-color-card > div:last-child { position: relative; z-index: 1; }.ci-color-card span { font-size: 10px; font-weight: 720; letter-spacing: .12em; }.ci-color-card h3 { margin: 9px 0 2px; font-family: var(--serif); font-size: 31px; font-weight: 400; font-style: italic; letter-spacing: -.045em; }.ci-color-card p { margin: 0; font-size: 12px; font-weight: 640; letter-spacing: .08em; }
.ci-usage { position: relative; overflow: hidden; padding: 145px 0 150px; }.ci-usage::before { content: ""; position: absolute; top: -350px; right: -150px; width: 650px; aspect-ratio: 1; border: 1px solid rgba(169,241,210,.11); border-radius: 50%; }.ci-usage .section-intro { color: rgba(255,255,255,.65); }.ci-usage-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 70px; }.ci-usage-card { min-height: 465px; padding: 20px; border: 1px solid rgba(255,255,255,.25); transition: background .3s, transform .3s; }.ci-usage-card:hover { background: rgba(255,255,255,.05); transform: translateY(-6px); }.usage-visual { position: relative; display: grid; place-items: center; height: 230px; margin-bottom: 23px; overflow: hidden; background: rgba(255,255,255,.045); }.usage-visual svg { width: 78%; height: 78%; }.usage-visual.scale svg { width: 52%; height: 52%; }.usage-visual.scale > span { position: absolute; right: 18px; bottom: 14px; color: var(--mint); font-size: 10px; letter-spacing: .11em; }.usage-visual.dont svg { width: 78%; height: 78%; }.ci-usage-card > span { color: var(--mint); font-size: 10px; font-weight: 690; letter-spacing: .12em; }.ci-usage-card h3 { margin: 11px 0 9px; color: var(--white); font-size: 24px; font-weight: 590; letter-spacing: -.055em; }.ci-usage-card p { margin: 0; color: rgba(255,255,255,.63); font-size: 14px; line-height: 1.73; word-break: keep-all; }
.ci-download { padding: 145px 0; }.ci-download-panel { position: relative; display: grid; grid-template-columns: .95fr 1.05fr; min-height: 490px; overflow: hidden; color: var(--white); background: #155e5d; }.ci-download-panel::before { content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: .3; background-image: linear-gradient(rgba(255,255,255,.15) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.15) 1px, transparent 1px); background-size: 58px 58px; mask-image: linear-gradient(90deg, #000, transparent 88%); }.ci-download-mark { position: relative; z-index: 1; display: grid; place-items: center; padding: 55px; }.ci-download-mark::before { content: ""; position: absolute; width: 65%; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; }.ci-download-mark svg { width: min(100%, 370px); filter: drop-shadow(0 20px 35px rgba(0,0,0,.14)); }.ci-download-copy { position: relative; z-index: 1; align-self: center; padding: 65px 70px 65px 20px; }.ci-download-copy .display { margin-top: 22px; font-size: clamp(42px, 4.2vw, 65px); }.ci-download-copy .display strong { color: var(--mint); }.ci-download-copy > p:not(.eyebrow) { max-width: 390px; margin: 25px 0 0; color: rgba(255,255,255,.72); font-size: 15px; line-height: 1.75; word-break: keep-all; }.ci-download-button { display: grid; grid-template-columns: 37px 1fr 26px; align-items: center; gap: 13px; max-width: 400px; margin-top: 30px; padding: 16px; color: var(--ink); background: var(--mint); transition: transform .25s, background .25s; }.ci-download-button:hover { background: var(--aqua); transform: translateY(-4px); }.ci-download-button > span { display: grid; place-items: center; width: 37px; height: 37px; color: var(--white); background: var(--ink); font-family: var(--serif); font-size: 13px; font-style: italic; }.ci-download-button strong { font-size: 14px; letter-spacing: -.02em; }.ci-download-button i { font-size: 21px; font-style: normal; text-align: right; }.ci-download-copy small { display: block; margin-top: 12px; color: rgba(255,255,255,.47); font-size: 10px; letter-spacing: .03em; }
.ci-download-options { display: grid; gap: 9px; max-width: 400px; margin-top: 30px; }
.ci-download-options .ci-download-button { max-width: none; margin-top: 0; padding: 14px 16px; }
.ci-download-options .ci-download-button:nth-child(2) { background: var(--white); }
.ci-download-options .ci-download-button:nth-child(2) > span { font-family: var(--sans); font-size: 10px; font-style: normal; font-weight: 760; }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(169,241,210,.45); } 50% { box-shadow: 0 0 0 8px rgba(169,241,210,0); } }
@media (max-width: 1000px) { :root { --wrap: min(100% - 48px, 1240px); }.desktop-nav { gap: 22px; }.hero-layout { grid-template-columns: 1fr .74fr; }.hero h1 { font-size: clamp(46px, 6.2vw, 68px); }.portfolio-grid { grid-template-columns: repeat(2, 1fr); }.portfolio-card { min-height: 345px; }.card-icon { margin-top: 48px; }.cycle { height: 510px; }.cycle-1 { left: 0; }.cycle-2 { left: 40%; }.cycle-3 { right: 0; }.cycle-4 { left: 17%; }.principles-layout { grid-template-columns: 30% 1fr; gap: 4%; }.signal-strip-inner { grid-template-columns: 25% 1fr; }.contact-layout { gap: 60px; } }
@media (max-width: 720px) { :root { --wrap: calc(100% - 40px); } .site-header { width: var(--wrap); height: 75px; }.desktop-nav, .header-cta { display: none; }.menu-toggle { position: relative; z-index: 4; display: grid; gap: 6px; width: 37px; height: 37px; place-content: center; margin-left: auto; padding: 0; color: var(--white); border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: transparent; cursor: pointer; }.menu-toggle span { display: block; width: 15px; height: 1px; background: currentColor; transition: transform .25s, opacity .25s; }.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }.mobile-menu { position: absolute; z-index: 3; top: 0; right: -1px; display: flex; visibility: hidden; flex-direction: column; gap: 20px; width: min(280px, calc(100vw - 40px)); padding: 86px 28px 28px; color: var(--ink); background: var(--mint); box-shadow: 0 15px 35px rgba(0,0,0,.2); opacity: 0; transform: translateY(-10px); transition: opacity .2s, transform .2s, visibility .2s; }.mobile-menu.open { visibility: visible; opacity: 1; transform: translateY(0); }.mobile-menu a { font-size: 17px; font-weight: 620; }.hero { min-height: 805px; }.hero-layout { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 126px 0 46px; }.hero h1 { margin: 25px 0 19px; font-size: clamp(42px, 12vw, 59px); line-height: 1.12; }.hero-description { font-size: 15px; }.hero-actions { gap: 20px; margin-top: 29px; }.button { padding: 13px 14px; gap: 17px; }.hero-visual { width: min(100%, 390px); margin: auto -12px 0 auto; }.signal-card { font-size: 8px; }.signal-card b { width: 21px; height: 21px; font-size: 7px; }.signal-card i { width: 16px; }.visual-caption { font-size: 7px; }.hero-footer { height: 56px; font-size: 8px; letter-spacing: .08em; }.hero-footer a span { display: none; }.hero-footer a i { width: 30px; }.intro { padding: 100px 0; }.intro-layout, .principles-layout { grid-template-columns: 1fr; gap: 35px; }.display { font-size: clamp(38px, 11.5vw, 53px); line-height: 1.12; }.intro-bottom { grid-template-columns: 1fr 50px; gap: 14px; margin-top: 46px; }.intro-bottom p { font-size: 15px; }.round-arrow { width: 50px; height: 50px; }.portfolio, .system, .principles, .roadmap, .contact { padding: 100px 0; }.section-top { display: grid; gap: 26px; }.section-intro { font-size: 15px; text-align: left; }.portfolio-heading, .roadmap-heading, .system-heading { grid-template-columns: 1fr; gap: 21px; margin-top: 35px; }.portfolio-heading > p, .roadmap-heading > p, .system-heading > p { font-size: 15px; }.portfolio-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 52px; }.portfolio-card { min-height: 310px; padding: 22px; }.card-icon { width: 52px; margin-top: 36px; }.portfolio-card h3 { margin-top: 23px; }.system { padding-bottom: 74px; }.cycle { display: grid; grid-template-columns: 1fr 1fr; gap: 44px 13px; height: auto; margin-top: 57px; }.cycle-path { display: none; }.cycle-item { position: relative; top: auto; right: auto; bottom: auto; left: auto; width: auto; min-height: 160px; padding: 15px 9px; }.cycle-item h3 { font-size: 25px; }.cycle-item p { font-size: 12px; }.system-note { align-items: flex-start; margin-top: 42px; }.principles-copy .display { margin-top: 28px; }.principles-copy > p { margin-top: 22px; }.principle { min-height: 120px; grid-template-columns: 38px 1fr 28px; gap: 7px; }.principle h3 { font-size: 23px; }.principle p { font-size: 12px; }.roadmap-line { height: 42px; margin-top: 49px; }.roadmap-line span { left: 50%; box-shadow: none; }.roadmap-grid { grid-template-columns: 1fr; gap: 10px; }.roadmap-card { min-height: 340px; }.roadmap-phase { margin-top: 29px; }.signal-strip-inner { grid-template-columns: 1fr; padding: 42px 0 0; }.signal-strip .eyebrow { padding-bottom: 23px; }.signal-metrics { border-top: 1px solid rgba(255,255,255,.25); }.signal-metrics > div { min-height: 150px; padding: 20px 12px; border-left: 0; border-right: 1px solid rgba(255,255,255,.25); }.signal-metrics > div:last-child { border-right: 0; }.signal-metrics b { font-size: 26px; }.signal-metrics p { font-size: 13px; }.contact-layout { grid-template-columns: 1fr; gap: 45px; }.contact-card { min-height: 310px; }.contact-email { font-size: 37px; }.footer-top { min-height: 115px; flex-wrap: wrap; align-content: center; gap: 18px; }.footer-top > p { order: 3; flex-basis: 100%; margin: 0; font-size: 8px; }.back-top { margin-left: auto; }.footer-bottom { flex-direction: column; gap: 8px; font-size: 9px; }.footer-bottom p:last-child { text-align: left; }.reveal { transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; }.reveal { opacity: 1; transform: none; transition: none; }.pulse-dot { animation: none; }.portfolio-card, .button, .round-arrow, .principle, .principle i, .roadmap-card { transition: none; } }
@media (max-width: 1000px) { .ci-hero-layout { grid-template-columns: .86fr 1fr; gap: 15px; }.ci-mark-stage { width: min(100%, 490px); }.ci-intro-layout { grid-template-columns: 30% 1fr; gap: 4%; }.ci-intro-copy { grid-template-columns: 1fr; gap: 30px; }.ci-colors-heading { grid-template-columns: 1fr .65fr; }.ci-download-copy { padding-right: 42px; } }
@media (max-width: 720px) { .ci-hero { min-height: 805px; }.ci-hero-layout { min-height: calc(805px - 56px); display: flex; flex-direction: column; align-items: flex-start; padding: 120px 0 36px; }.ci-hero-copy h1 { margin: 24px 0 17px; font-size: clamp(42px, 12vw, 59px); }.ci-hero-copy > p:not(.eyebrow) { font-size: 15px; }.ci-hero-copy .button { margin-top: 27px; }.ci-mark-stage { width: min(100%, 400px); margin: auto -14px 0 auto; }.ci-stage-label { font-size: 8px; }.ci-stage-label::before { width: 15px; margin-right: 5px; }.ci-mark-stage > p { font-size: 7px; }.ci-hero-footer { height: 56px; gap: 15px; font-size: 8px; letter-spacing: .07em; }.ci-hero-footer > span { display: none; }.ci-hero-footer a { margin-left: 0; }.ci-intro { padding: 100px 0; }.ci-intro-layout { grid-template-columns: 1fr; gap: 35px; }.ci-intro-copy { grid-template-columns: 1fr; gap: 30px; margin-top: 43px; }.ci-intro-copy > p { font-size: 15px; }.ci-intro-copy dl { gap: 28px; }.ci-intro-copy dt { font-size: 38px; }.ci-colors { padding: 100px 0; }.ci-colors-heading { grid-template-columns: 1fr; gap: 20px; margin-top: 35px; }.ci-colors-heading > p { font-size: 15px; }.ci-color-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 50px; }.ci-color-card { min-height: 255px; flex-direction: row; align-items: flex-end; }.ci-color-dot { width: 160px; margin: auto 0; }.ci-usage { padding: 100px 0; }.ci-usage-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 50px; }.ci-usage-card { min-height: 0; }.usage-visual { height: 200px; }.ci-download { padding: 75px 0; }.ci-download-panel { grid-template-columns: 1fr; min-height: 0; }.ci-download-mark { min-height: 295px; padding: 44px; }.ci-download-mark svg { width: min(100%, 280px); }.ci-download-copy { padding: 16px 26px 43px; }.ci-download-copy .display { font-size: clamp(39px, 11vw, 54px); }.ci-download-copy > p:not(.eyebrow) { font-size: 14px; }.ci-download-button { margin-top: 25px; } }