:root {
  --bg:          #F2EDEC;
  --bg-alt:      #EDE7E6;
  --surface:     #FCFAF9;
  --surface-2:   #FFFFFF;
  --line:        rgba(15,10,44,0.08);
  --line-strong: rgba(15,10,44,0.16);
  --ink:         #0F0A2C;
  --ink-2:       #1B1640;
  --ink-muted:   #5B5572;
  --ink-soft:    #8B859E;
  --blue:        #2563EB;
  --blue-soft:   #DCE6FE;
  --magenta:     #2563EB;
  --magenta-deep:#1e40af;
  --accent:      #F9C846;
  --accent-deep: #C97B1F;
  --accent-soft: #FEF3C7;
  --tri-green:   #009344;
  --tri-blue:    #FFFFFF;
  --tri-red:     #CF2734;
  --f-display:   'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-body:      'Geist', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono:      'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px;
  --r-2xl: 44px; --r-pill: 999px;
  --sh-card:    0 1px 0 rgba(15,10,44,.04), 0 8px 30px -10px rgba(15,10,44,.10);
  --sh-float:   0 10px 40px -8px rgba(15,10,44,.18), 0 2px 6px rgba(15,10,44,.06);
  --sh-magenta: 0 14px 32px -10px rgba(37,99,235,.55), 0 4px 12px rgba(37,99,235,.25);
  --sh-accent:  0 12px 28px -8px rgba(249,200,70,.50);
  --max: 1280px;
  --pad: clamp(20px, 4vw, 48px);
}
*,*::before,*::after { box-sizing: border-box }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth }
body {
  margin: 0; font-family: var(--f-body); background: var(--bg); color: var(--ink);
  font-feature-settings: "ss01","cv11","kern"; line-height: 1.5;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img,svg { display: block; max-width: 100% }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0 }
a { color: inherit; text-decoration: none }
::selection { background: var(--ink); color: var(--accent) }
.eyebrow {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--magenta); font-weight: 500;
}
.eyebrow.dim { color: var(--ink-muted) }
h1,h2,h3,h4 { margin: 0; font-family: var(--f-display); letter-spacing: -0.02em; line-height: 1.02; color: var(--ink) }
.h-display { font-size: clamp(44px,5vw,100px); font-weight: 800; line-height: 0.96; letter-spacing: -0.035em; overflow-wrap: break-word }
.h-display em {
  font-style: normal;
  background: linear-gradient(135deg, var(--accent), var(--accent-deep));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.h-1 { font-size: clamp(40px,5.4vw,76px); font-weight: 800; letter-spacing: -0.03em; line-height: 1 }
.h-2 { font-size: clamp(28px,3.2vw,44px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05 }
.h-3 { font-size: 22px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2 }
p { margin: 0 }
.lead { font-size: clamp(16px,1.25vw,19px); color: var(--ink-muted); line-height: 1.55; max-width: 54ch }
.mono { font-family: var(--f-mono) }
.btn {
  display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px;
  border-radius: var(--r-pill); font-weight: 600; font-size: 15px;
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s ease, background .2s;
  white-space: nowrap; will-change: transform;
}
.btn-magenta { background: var(--magenta); color: #fff; box-shadow: var(--sh-magenta) }
.btn-magenta:hover { transform: translateY(-1px); background: var(--magenta-deep) }
.btn-magenta:active { transform: translateY(0) }
.btn-white { background: var(--surface-2); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 1px 0 rgba(15,10,44,.04) }
.btn-white:hover { transform: translateY(-1px); border-color: var(--line-strong) }
.btn-dark { background: var(--ink); color: #fff }
.btn-dark:hover { background: var(--ink-2); transform: translateY(-1px) }
.btn .ico { width: 18px; height: 18px }
.promo {
  background: var(--ink); color: #fff; font-size: 14px; font-weight: 500;
  display: flex; justify-content: center; align-items: center; gap: 18px;
  padding: 12px var(--pad); letter-spacing: -0.005em;
}
.promo .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent) }
.promo a { color: var(--accent); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px }
.promo a:hover { color: #fff }
@media (max-width:640px) { .promo .hide-sm { display: none } }
.nav-wrap { position: sticky; top: 14px; z-index: 50; padding: 0 var(--pad); margin-top: 14px }
.nav {
  max-width: var(--max); margin: 0 auto; background: var(--surface-2);
  border-radius: var(--r-pill); padding: 10px 12px 10px 22px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 8px 28px -12px rgba(15,10,44,.20), 0 1px 0 rgba(15,10,44,.04);
  border: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; font-family: var(--f-display); font-weight: 800; font-size: 20px; letter-spacing: -0.02em }
.brand .g { color: var(--tri-green) }
.brand .b { color: var(--tri-blue); -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill }
.brand .r { color: var(--tri-red) }
.brand .sep { color: var(--line-strong); font-weight: 300; margin: 0 3px; font-size: 0.85em }
.brand .com { color: var(--tri-red) }
.nav-links { display: flex; gap: 4px; margin-left: 18px }
.nav-links a { padding: 9px 14px; border-radius: var(--r-pill); font-size: 14px; font-weight: 500; color: var(--ink-muted); transition: color .2s, background .2s }
.nav-links a:hover, .nav-links a.active { color: var(--ink); background: var(--bg) }
.nav-spacer { flex: 1 }
.nav-cta { display: flex; gap: 8px; align-items: center }
.nav-cta .btn { padding: 11px 18px; font-size: 14px }
.nav-link-imagine { color: #2563EB !important } .nav-link-imagine:hover { color: #1e40af !important }
.nav-link-pdf { color: #EE3A8C !important } .nav-link-pdf:hover { color: #D11F73 !important }
.nav-link-convert { color: #F9C846 !important } .nav-link-convert:hover { color: #C97B1F !important }
.nav-link-compress { color: #009344 !important } .nav-link-compress:hover { color: #007a33 !important }
.nav-link-calc { color: #8B5CF6 !important } .nav-link-calc:hover { color: #7c3aed !important }
@media (max-width:880px) { .nav-links { display: none } }
@media (max-width:520px) { .nav-cta .btn-white { display: none } }
.section { padding: clamp(60px,8vw,120px) var(--pad) }
.section.tight { padding: clamp(40px,5vw,70px) var(--pad) }
.wrap { max-width: var(--max); margin: 0 auto }
.hero { padding: clamp(40px,6vw,80px) var(--pad) clamp(60px,8vw,120px); position: relative }
.hero-grid {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0,.95fr) minmax(0,1.15fr);
  gap: clamp(40px,5vw,80px); align-items: center;
}
@media (max-width:980px) { .hero-grid { grid-template-columns: 1fr; gap: 48px } }
.hero-copy .eyebrow { margin-bottom: 22px; display: inline-block }
.hero-copy h1 { margin: 0 0 24px }
.hero-copy .lead { margin-bottom: 28px }
.checks { display: flex; flex-direction: column; gap: 10px; margin-bottom: 36px }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--ink); font-weight: 500 }
.check svg { flex: 0 0 18px; margin-top: 3px; color: var(--magenta) }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center }
.hero-byline { margin-top: 24px; display: flex; align-items: center; gap: 14px; font-family: var(--f-mono); font-size: 12px; color: var(--ink-muted) }
.hero-byline .stars { color: var(--accent); letter-spacing: 2px }
.hero-byline .sep { width: 1px; height: 14px; background: var(--line-strong) }
.mockup {
  position: relative; border-radius: var(--r-2xl);
  background: linear-gradient(135deg, #F7F1F0 0%, #ECE6E5 100%);
  border: 1px solid var(--line); padding: 28px;
  box-shadow: var(--sh-card); isolation: isolate;
}
.mockup-tabs { display: flex; gap: 8px; margin-bottom: 18px; font-family: var(--f-mono); font-size: 11px }
.mockup-tabs .tab { padding: 6px 12px; border-radius: var(--r-pill); background: rgba(15,10,44,.06); color: var(--ink-muted); display: inline-flex; align-items: center; gap: 6px }
.mockup-tabs .tab.active { background: var(--ink); color: #fff }
.mockup-tabs .tab .pip { width: 6px; height: 6px; border-radius: 50%; background: var(--accent) }
.convert-canvas {
  border-radius: var(--r-lg); overflow: hidden; background: #fff;
  border: 1px solid var(--line); padding: 20px 20px 16px;
  background-image:
    linear-gradient(45deg, rgba(15,10,44,.04) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(15,10,44,.04) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(15,10,44,.04) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(15,10,44,.04) 75%);
  background-size: 22px 22px;
  background-position: 0 0, 0 11px, 11px -11px, -11px 0;
  background-color: #fff;
}
.flow-row { display: flex; align-items: center; gap: 0; margin-bottom: 14px }
.fmt-node { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 0 0 auto }
.fmt-badge {
  width: 68px; height: 68px; border-radius: 16px; display: grid; place-items: center;
  font-family: var(--f-mono); font-weight: 700; font-size: 13px; letter-spacing: 0.05em;
}
.fmt-badge.source { background: var(--ink); color: var(--accent); box-shadow: 0 8px 24px -6px rgba(15,10,44,.4) }
.fmt-badge.target { background: var(--accent); color: var(--ink); box-shadow: var(--sh-accent) }
.fmt-node-label { font-family: var(--f-mono); font-size: 9px; color: var(--ink-soft); letter-spacing: 0.1em; text-transform: uppercase }
.pipe-wrap { flex: 1; padding: 0 12px; display: flex; align-items: center; position: relative }
.pipe-track {
  width: 100%; height: 2px; border-radius: 2px;
  background: rgba(15,10,44,.1); position: relative; overflow: hidden;
}
.pipe-track::after {
  content: ''; position: absolute; top: 0; left: -100%; bottom: 0; width: 200%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  animation: pipe-flow 1.8s linear infinite;
}
@keyframes pipe-flow { from { transform: translateX(0) } to { transform: translateX(50%) } }
.pipe-arrow-icon {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  color: var(--accent-deep); flex: 0 0 auto;
}
.format-pills { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 12px }
.fmt-pill {
  padding: 5px 10px; border-radius: var(--r-pill);
  font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600;
  border: 1.5px solid var(--line); color: var(--ink-muted); background: var(--bg);
  cursor: pointer; transition: all .2s cubic-bezier(.2,.7,.2,1);
}
.fmt-pill.selected { background: var(--accent); color: var(--ink); border-color: var(--accent-deep); box-shadow: 0 4px 12px -4px rgba(249,200,70,.55) }
.fmt-pill:hover:not(.selected) { border-color: var(--line-strong); color: var(--ink) }
.pipeline { display: flex; flex-direction: column; gap: 5px }
.p-row {
  display: flex; align-items: center; gap: 7px; padding: 7px 10px;
  border-radius: 9px; background: var(--bg); border: 1px solid var(--line);
  position: relative; overflow: hidden;
  transition: border-color .3s;
}
.p-row::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  border-radius: 2px 0 0 2px; background: var(--line); transition: background .3s;
}
.p-row.p-done::before { background: #009344 }
.p-row.p-active::before { background: var(--magenta) }
.p-badge {
  font-family: var(--f-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.06em;
  padding: 2px 6px; border-radius: 5px; text-transform: uppercase; flex: 0 0 auto; min-width: 30px; text-align: center;
}
.p-in { background: rgba(15,10,44,.08); color: var(--ink-muted) }
.p-row.p-done .p-in { background: var(--accent-soft); color: var(--accent-deep) }
.p-row.p-active .p-in { background: var(--blue-soft); color: var(--magenta) }
.p-out { background: rgba(15,10,44,.06); color: var(--ink-muted) }
.p-row.p-done .p-out { background: var(--ink); color: var(--accent) }
.p-row.p-active .p-out { background: var(--magenta); color: #fff; animation: badge-pulse .9s ease-in-out infinite alternate }
@keyframes badge-pulse { from { opacity:.7 } to { opacity:1 } }
.p-arr { font-size: 9px; color: var(--ink-soft); flex: 0 0 auto }
.p-name { font-size: 10px; color: var(--ink-muted); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
.p-row.p-done .p-name { color: var(--ink) }
.p-spinner { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(37,99,235,.2); border-top-color: var(--magenta); animation: spin .8s linear infinite; flex: 0 0 auto }
@keyframes spin { to { transform: rotate(360deg) } }
.p-check { flex: 0 0 auto }
.toggle-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-family: var(--f-mono); font-size: 9px; color: var(--ink-muted); letter-spacing: 0.06em; text-transform: uppercase }
.tog { width: 28px; height: 16px; border-radius: 8px; background: var(--accent); position: relative; flex: 0 0 auto }
.tog::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transform: translateX(12px); transition: transform .3s cubic-bezier(.4,2,.4,1) }
.float {
  position: absolute; background: var(--surface-2); border-radius: 18px;
  box-shadow: var(--sh-float); padding: 12px 16px; border: 1px solid var(--line); z-index: 3;
}
.float .lbl {
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.08em;
  color: var(--ink-soft); text-transform: uppercase;
  display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
}
.float .lbl .chk { display: inline-flex; width: 14px; height: 14px; border-radius: 50%; background: var(--magenta); color: #fff; align-items: center; justify-content: center }
.float .lbl .chk svg { width: 8px; height: 8px }
.float .val { font-family: var(--f-display); font-weight: 700; font-size: 20px; color: var(--ink); letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 6px }
.float .unit { font-size: 12px; color: var(--ink-muted); font-weight: 500 }
.float-input { top: -22px; left: -12px; animation: floatA 6s ease-in-out infinite }
.float-output { bottom: 30px; left: -30px; animation: floatB 6s ease-in-out infinite; background: #fff }
.float-output .val { color: var(--accent-deep) }
.float-size { top: 24px; right: -26px; animation: floatA 7s ease-in-out infinite 1s; min-width: 176px }
.float-size .bars { margin-top: 10px; display: flex; flex-direction: column; gap: 5px }
.float-size .bar-row { display: flex; flex-direction: column; gap: 3px }
.float-size .bar-meta { display: flex; justify-content: space-between; font-family: var(--f-mono); font-size: 9px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.06em }
.float-size .bar { height: 5px; border-radius: var(--r-pill); background: var(--bg); position: relative; overflow: hidden }
.float-size .bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--r-pill) }
.bar-orig i { width: 100%; background: rgba(15,10,44,.22) }
.bar-conv i { width: 41%; background: linear-gradient(90deg, var(--accent), var(--accent-deep)) }
.float-lossless {
  bottom: -22px; right: 18px; animation: floatB 7s ease-in-out infinite .5s;
  background: var(--ink); border-color: transparent; color: #fff;
  display: flex; align-items: center; gap: 10px;
}
.float-lossless .flbl { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,.6); margin-bottom: 0 }
.float-lossless .fbadge { padding: 3px 8px; background: var(--accent); color: var(--ink); border-radius: var(--r-pill); font-family: var(--f-mono); font-size: 10px; font-weight: 700; letter-spacing: 0.06em }
@keyframes floatA { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-10px) } }
@keyframes floatB { 0%,100% { transform: translateY(0) } 50% { transform: translateY(8px) } }
@media (prefers-reduced-motion:reduce) { .float-input,.float-output,.float-size,.float-lossless { animation: none } }
@media (max-width:560px) { .mockup { padding: 20px } .float-input { left: 8px; top: -18px } .float-output { left: -10px } .float-size { right: -10px; min-width: 150px } }
.trust {
  background: var(--ink); color: #fff; border-radius: var(--r-2xl);
  padding: 36px 40px; display: grid; grid-template-columns: auto 1fr auto;
  gap: 32px; align-items: center; margin: 0 auto; max-width: var(--max);
}
.trust .badge {
  width: 64px; height: 64px; border-radius: 50%; background: var(--accent);
  display: grid; place-items: center; font-family: var(--f-display);
  font-weight: 800; font-size: 22px; flex: 0 0 auto; color: var(--ink);
}
.trust h3 { color: #fff; font-size: clamp(20px,2vw,28px); font-weight: 700; letter-spacing: -0.02em }
.trust p { color: rgba(255,255,255,.7); font-size: 14px; margin-top: 4px; max-width: 55ch }
.trust .stats { display: flex; gap: 30px; align-items: center }
.trust .stat { text-align: right; font-family: var(--f-mono) }
.trust .stat .n { font-size: 28px; font-weight: 700; color: var(--accent); letter-spacing: -0.02em; font-family: var(--f-display) }
.trust .stat .l { font-size: 11px; color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: 0.12em; margin-top: 4px }
@media (max-width:820px) { .trust { grid-template-columns: 1fr; text-align: center } .trust .stats { justify-content: center } }
.formats {
  display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
  padding: 24px 8px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  max-width: var(--max); margin: clamp(40px,5vw,70px) auto 0;
}
.formats .label { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.08em; color: var(--ink-muted); text-transform: uppercase }
.formats .row { display: flex; gap: clamp(18px,3vw,44px); flex-wrap: wrap; align-items: center }
.fmt { font-family: var(--f-display); font-weight: 800; font-size: 22px; color: var(--ink-soft); letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 6px; transition: color .2s }
.fmt:hover { color: var(--ink) }
.fmt .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .5 }
.alt {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px,6vw,100px); align-items: center; max-width: var(--max); margin: 0 auto;
}
.alt.reverse .alt-visual { order: -1 }
.alt-visual {
  position: relative; border-radius: var(--r-xl); aspect-ratio: 4/3;
  background: var(--surface); border: 1px solid var(--line); overflow: hidden; box-shadow: var(--sh-card);
}
.alt-copy .eyebrow { margin-bottom: 18px; display: inline-block }
.alt-copy h2 { margin-bottom: 20px }
.alt-copy .lead { margin-bottom: 28px }
.alt-list { display: grid; gap: 16px; margin-top: 24px }
.alt-list li { display: flex; gap: 14px; padding: 14px 16px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); align-items: flex-start }
.alt-list .num { font-family: var(--f-mono); font-size: 11px; font-weight: 600; color: var(--accent-deep); letter-spacing: 0.08em; width: 44px; flex: 0 0 auto; margin-top: 2px }
.alt-list strong { display: block; font-size: 15px; color: var(--ink); margin-bottom: 2px }
.alt-list .d { color: var(--ink-muted); font-size: 14px }
@media (max-width:880px) { .alt { grid-template-columns: 1fr; gap: 40px } .alt.reverse .alt-visual { order: 0 } }
.fmt-matrix {
  position: absolute; inset: 0; display: grid;
  grid-template-columns: repeat(5,1fr); grid-template-rows: auto repeat(4,1fr);
  font-family: var(--f-mono); font-size: 10px;
}
.fmx-h { display: flex; align-items: center; justify-content: center; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; padding: 10px 4px; border-bottom: 1px solid var(--line) }
.fmx-h.lbl { color: var(--ink-muted); justify-content: flex-start; padding-left: 12px }
.fmx-h.hl { background: rgba(249,200,70,.12); color: var(--accent-deep); border-bottom: 2px solid var(--accent) }
.fmx-c { display: flex; align-items: center; justify-content: center; font-size: 10px; padding: 8px 4px; border-bottom: 1px solid var(--line) }
.fmx-c.lbl { justify-content: flex-start; padding-left: 12px; color: var(--ink-muted); font-weight: 500 }
.fmx-c.hl { background: rgba(249,200,70,.06) }
.fmx-yes { color: #009344; font-weight: 700; font-size: 13px }
.fmx-no { color: var(--ink-soft); font-size: 13px }
.fmx-part { color: var(--accent-deep); font-weight: 600; font-size: 9px; letter-spacing: 0.04em }
.cs-visual { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 24px }
.cs-ring-wrap { position: relative; width: 130px; height: 130px }
.cs-ring-wrap svg { width: 100%; height: 100% }
.cs-lbl { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px }
.cs-lbl .name { font-family: var(--f-mono); font-size: 9px; font-weight: 700; color: var(--ink); letter-spacing: 0.06em; text-transform: uppercase }
.cs-lbl .num { font-family: var(--f-display); font-size: 24px; font-weight: 800; color: var(--accent-deep); letter-spacing: -0.02em }
.cs-lbl .sub { font-family: var(--f-mono); font-size: 8px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.08em }
.cs-legend { display: flex; flex-direction: column; gap: 8px; width: 100% }
.cs-leg-row { display: flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 10px }
.cs-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto }
.cs-leg-label { color: var(--ink-muted); letter-spacing: 0.06em; text-transform: uppercase; flex: 1 }
.cs-leg-val { color: var(--ink); font-weight: 600 }
.how-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; max-width: var(--max); margin: 0 auto clamp(40px,5vw,70px); flex-wrap: wrap }
.how-grid { max-width: var(--max); margin: 0 auto; display: grid; gap: 20px; grid-template-columns: repeat(3,1fr) }
@media (max-width:880px) { .how-grid { grid-template-columns: 1fr } }
.how-card {
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-xl);
  padding: 28px; position: relative; overflow: hidden;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s;
  min-height: 380px; display: flex; flex-direction: column; gap: 16px;
}
.how-card:hover { transform: translateY(-6px); box-shadow: var(--sh-float) }
.how-num { font-family: var(--f-mono); font-size: 11px; font-weight: 600; color: var(--accent-deep); letter-spacing: 0.14em }
.how-card h3 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em }
.how-card p { font-size: 14px; color: var(--ink-muted); line-height: 1.55 }
.how-stage {
  flex: 1; min-height: 170px; margin-top: 14px; border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--bg-alt), var(--bg));
  position: relative; overflow: hidden; border: 1px solid var(--line);
}
.stage-drop { display: grid; place-items: center; padding: 20px }
.drop-orbit { position: relative; width: 140px; height: 140px; display: grid; place-items: center }
.drop-core {
  width: 58px; height: 58px; border-radius: 16px; background: var(--ink);
  display: grid; place-items: center; z-index: 2;
  box-shadow: 0 8px 24px -6px rgba(15,10,44,.45);
}
.drop-core svg { color: var(--accent) }
.orbit-ring { position: absolute; inset: 0; animation: orbit-spin 12s linear infinite }
.how-card:hover .orbit-ring { animation-duration: 5s }
.orbit-dot {
  position: absolute; width: 30px; height: 22px; border-radius: 7px;
  display: grid; place-items: center;
  font-family: var(--f-mono); font-size: 8px; font-weight: 700; letter-spacing: 0.04em;
  top: 50%; left: 50%; transform-origin: 0 0;
}
.od-1 { background: rgba(15,10,44,.9); color: var(--accent); transform: rotate(0deg) translateX(58px) translateY(-11px) }
.od-2 { background: var(--surface-2); color: var(--ink-muted); border: 1px solid var(--line); transform: rotate(90deg) translateX(58px) translateY(-11px) }
.od-3 { background: var(--accent-soft); color: var(--accent-deep); transform: rotate(180deg) translateX(58px) translateY(-11px) }
.od-4 { background: var(--surface-2); color: var(--ink-muted); border: 1px solid var(--line); transform: rotate(270deg) translateX(58px) translateY(-11px) }
@keyframes orbit-spin { from { transform: rotate(0deg) } to { transform: rotate(360deg) } }
.stage-formats { display: grid; place-items: center; padding: 16px }
.fmt-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; width: 158px }
.fmt-tile {
  padding: 10px 8px; border-radius: 12px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 700;
  border: 2px solid var(--line); background: var(--surface-2); color: var(--ink-muted);
  transition: all .3s cubic-bezier(.2,.7,.2,1); cursor: pointer;
}
.fmt-tile.t-active { background: var(--ink); color: var(--accent); border-color: var(--ink); transform: scale(1.05); box-shadow: 0 6px 18px -4px rgba(15,10,44,.35) }
.fmt-tile.t-gold { background: var(--accent); color: var(--ink); border-color: var(--accent-deep); transform: scale(1.05); box-shadow: var(--sh-accent) }
.how-card:hover .fmt-tile.t-active { background: var(--accent); color: var(--ink); border-color: var(--accent-deep); box-shadow: var(--sh-accent) }
.fmt-tile svg { width: 18px; height: 18px; opacity: .7 }
.fmt-tile.t-active svg, .fmt-tile.t-gold svg { opacity: 1 }
.stage-dl { display: grid; place-items: center; padding: 20px; position: relative }
.dl-card {
  width: 128px; background: #fff; border-radius: 14px; border: 1px solid var(--line);
  box-shadow: 0 12px 30px -10px rgba(15,10,44,.25); padding: 14px;
  transform: rotate(-3deg); transition: transform .6s cubic-bezier(.2,.7,.2,1); position: relative;
}
.how-card:hover .dl-card { transform: rotate(0deg) translateY(-8px) }
.dl-card .corner { position: absolute; top: 0; right: 0; width: 24px; height: 24px; background: var(--bg); clip-path: polygon(0 0,100% 100%,100% 0) }
.dl-ribbon { display: inline-flex; align-items: center; gap: 5px; margin-bottom: 8px; font-family: var(--f-mono); font-size: 9px; font-weight: 700; letter-spacing: 0.06em; color: var(--accent-deep) }
.dl-ribbon .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--accent) }
.dl-img { width: 100%; aspect-ratio: 1/1; border-radius: 8px; margin-bottom: 8px; overflow: hidden }
.dl-gradient { width: 100%; height: 100%; background: linear-gradient(135deg, #F9C846 0%, #C97B1F 45%, #1e40af 100%); border-radius: 8px }
.dl-meta { font-family: var(--f-mono); font-size: 9px; color: var(--ink-muted); line-height: 1.4 }
.dl-meta b { color: var(--accent-deep); font-family: var(--f-display); font-size: 13px; display: block; letter-spacing: -0.02em }
.dl-check {
  position: absolute; top: -12px; right: -12px; width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent); color: var(--ink); display: grid; place-items: center;
  box-shadow: var(--sh-accent); transform: scale(0); transition: transform .4s cubic-bezier(.4,2,.4,1) .2s;
}
.how-card:hover .dl-check { transform: scale(1) }
.cmp { max-width: var(--max); margin: 0 auto; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--sh-card) }
.cmp-row { display: grid; grid-template-columns: 1.4fr repeat(4,1fr); border-bottom: 1px solid var(--line) }
.cmp-row:last-child { border-bottom: 0 }
.cmp-row > div { padding: 20px 24px; font-size: 14px; display: flex; align-items: center }
.cmp-row.head > div { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em; color: var(--ink-muted); text-transform: uppercase; font-weight: 500; background: var(--bg); padding: 22px 24px }
.cmp-row.head > div:first-child { font-family: var(--f-display); font-size: 13px; letter-spacing: -0.01em; font-weight: 600; color: var(--ink); text-transform: none }
.cmp-row.head .us { background: var(--ink); color: #fff; flex-direction: column; align-items: flex-start; gap: 5px; box-shadow: inset 0 3px 0 var(--accent) }
.us-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-family: var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--accent) }
.us-name { font-family: var(--f-display); font-weight: 800; font-size: 15px; letter-spacing: -0.02em; color: #fff }
.cmp-row .us { background: linear-gradient(180deg, rgba(249,200,70,.07) 0%, rgba(249,200,70,.03) 100%); font-weight: 600; border-left: 1px solid rgba(249,200,70,.2); border-right: 1px solid rgba(249,200,70,.2) }
.cmp-row.head .b { font-family: var(--f-display); font-weight: 700; font-size: 14px; color: var(--ink); letter-spacing: -0.01em; text-transform: none }
.cmp-cell { gap: 8px }
.cmp-cell svg { flex: 0 0 18px }
.cmp-row .feat { font-weight: 500; color: var(--ink); font-size: 14px }
.cmp-row:nth-child(even):not(.head) > div:not(.us) { background: rgba(15,10,44,.015) }
@media (max-width:760px) { .cmp-row { grid-template-columns: 1fr 1fr } .cmp-row > div:nth-child(n+3) { display: none } .cmp-row .us { border-left: 0; border-right: 0 } }
.faq-wrap { max-width: 920px; margin: 0 auto; display: grid; gap: 8px }
.faq { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; transition: border-color .2s }
.faq[open] { border-color: var(--line-strong) }
.faq summary { cursor: pointer; padding: 22px 26px; display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 17px; font-weight: 600; letter-spacing: -0.01em; list-style: none }
.faq summary::-webkit-details-marker { display: none }
.faq summary .plus { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; background: var(--bg); display: grid; place-items: center; transition: background .2s, transform .3s; color: var(--ink) }
.faq[open] summary .plus { background: var(--accent); color: var(--ink); transform: rotate(45deg) }
.faq .body { padding: 0 26px 24px; color: var(--ink-muted); font-size: 15px; line-height: 1.65; max-width: 70ch }
.faq .body code { font-family: var(--f-mono); background: var(--bg); padding: 2px 6px; border-radius: 6px; font-size: 13px; color: var(--ink) }
.reviews-section { padding: clamp(40px,5vw,70px) 0; overflow: hidden }
.reviews-label { text-align: center; margin-bottom: 36px; padding: 0 var(--pad); display: flex; flex-direction: column; align-items: center; gap: 12px }
.reviews-label h2 { font-size: clamp(24px,2.8vw,36px); font-weight: 700; letter-spacing: -0.025em }
.marquee-outer { overflow: hidden; mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%) }
.marquee-track { display: flex; gap: 16px; width: max-content; animation: marquee-roll 52s linear infinite }
.marquee-track:hover { animation-play-state: paused }
@keyframes marquee-roll { from { transform: translateX(0) } to { transform: translateX(-50%) } }
.review-card { flex: 0 0 300px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; box-shadow: var(--sh-card); transition: border-color .2s, box-shadow .2s }
.review-card:hover { border-color: var(--line-strong); box-shadow: var(--sh-float) }
.review-stars { color: var(--accent); font-size: 13px; letter-spacing: 3px }
.review-text { font-size: 14px; color: var(--ink); line-height: 1.65; flex: 1; font-style: italic }
.review-text::before { content: '\201C'; color: var(--ink-soft); font-size: 18px; font-style: normal; margin-right: 2px }
.review-text::after { content: '\201D'; color: var(--ink-soft); font-size: 18px; font-style: normal; margin-left: 2px }
.review-author { display: flex; align-items: center; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line) }
.review-avatar { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; background: var(--bg-alt); display: grid; place-items: center; font-family: var(--f-mono); font-size: 12px; font-weight: 700; color: var(--ink-muted) }
.review-name { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1.2 }
.review-role { font-size: 11px; color: var(--ink-soft); font-family: var(--f-mono); letter-spacing: 0.04em; text-transform: uppercase; margin-top: 2px }
.rel-grid { max-width: var(--max); margin: 0 auto; display: grid; gap: 14px; grid-template-columns: repeat(5,1fr) }
@media (max-width:980px) { .rel-grid { grid-template-columns: repeat(3,1fr) } }
@media (max-width:560px) { .rel-grid { grid-template-columns: repeat(2,1fr) } }
.rel { display: flex; flex-direction: column; gap: 12px; padding: 22px; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-lg); transition: transform .3s, border-color .2s }
.rel:hover { transform: translateY(-4px); border-color: var(--line-strong) }
.rel .ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--bg); color: var(--ink) }
.rel .name { font-size: 15px; font-weight: 600; letter-spacing: -0.01em }
.rel .d { font-size: 13px; color: var(--ink-muted) }
.rel .arrow { margin-top: 6px; font-family: var(--f-mono); font-size: 11px; color: var(--ink-soft); letter-spacing: 0.1em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px }
.rel:hover .arrow { color: var(--accent-deep) }
.final { max-width: var(--max); margin: 0 auto; background: var(--ink); border-radius: var(--r-2xl); padding: clamp(40px,6vw,80px); position: relative; overflow: hidden; color: #fff }
.final::before { content: ''; position: absolute; top: -40%; right: -10%; width: 60%; aspect-ratio: 1/1; background: radial-gradient(circle, rgba(249,200,70,.18), transparent 60%); filter: blur(40px) }
.final::after { content: ''; position: absolute; bottom: -50%; left: -10%; width: 50%; aspect-ratio: 1/1; background: radial-gradient(circle, rgba(37,99,235,.30), transparent 60%); filter: blur(50px) }
.final-inner { position: relative; z-index: 1; display: grid; gap: 30px; max-width: 760px }
.final h2 { color: #fff; font-size: clamp(36px,5vw,64px); font-weight: 800; letter-spacing: -0.03em }
.final p { color: rgba(255,255,255,.75); font-size: 17px; max-width: 55ch; line-height: 1.55 }
.final-input { display: flex; gap: 8px; background: var(--surface-2); padding: 8px; border-radius: var(--r-pill); align-items: center; max-width: 540px }
.final-input input { flex: 1; border: 0; background: transparent; padding: 14px 20px; font: inherit; color: var(--ink); outline: none; font-size: 15px }
.final-input input::placeholder { color: var(--ink-soft) }
.final-bullets { display: flex; gap: 24px; flex-wrap: wrap; font-family: var(--f-mono); font-size: 12px; color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: 0.1em }
.final-bullets span::before { content: '✓'; color: var(--accent); margin-right: 6px }
.foot { background: var(--ink); color: rgba(255,255,255,.7); margin-top: 60px; position: relative; padding: 80px var(--pad) 32px }
.foot-wave { position: absolute; top: 0; left: 0; right: 0; transform: translateY(-99%); width: 100%; height: 80px; pointer-events: none }
.foot-grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 50px; border-bottom: 1px solid rgba(255,255,255,.08) }
@media (max-width:880px) { .foot-grid { grid-template-columns: 1fr 1fr } }
@media (max-width:520px) { .foot-grid { grid-template-columns: 1fr } }
.foot-grid h4 { color: #fff; font-size: 14px; font-weight: 600; letter-spacing: -0.005em; margin-bottom: 18px }
.foot-grid ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px }
.foot-grid a { color: rgba(255,255,255,.6); font-size: 14px; transition: color .2s }
.foot-grid a:hover { color: #fff }
.foot-brand .brand { color: #fff; font-size: 24px }
.foot-brand .brand .sep { color: rgba(255,255,255,.3) }
.foot-brand .brand .com { color: #CF2734 }
.foot-brand .brand .b { -webkit-text-stroke: 0; text-shadow: none; color: #fff }
.foot-brand p { margin-top: 14px; font-size: 14px; max-width: 36ch; color: rgba(255,255,255,.6) }
.foot-bottom { max-width: var(--max); margin: 32px auto 0; display: flex; justify-content: space-between; align-items: center; font-family: var(--f-mono); font-size: 11px; color: rgba(255,255,255,.5); letter-spacing: 0.06em; text-transform: uppercase; flex-wrap: wrap; gap: 14px }
.reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1) }
.reveal.in { opacity: 1; transform: translateY(0) }
.reveal.delay-1 { transition-delay: .1s }
.reveal.delay-2 { transition-delay: .2s }
.reveal.delay-3 { transition-delay: .3s }
@media (prefers-reduced-motion:reduce) { .reveal { opacity: 1; transform: none; transition: none } }
.s-head { max-width: 860px; margin: 0 auto clamp(40px,5vw,70px); text-align: center; padding: 0 var(--pad) }
.s-head .eyebrow { margin-bottom: 18px; display: inline-block }
.s-head h2 { margin-bottom: 18px }
.s-head .lead { margin: 0 auto }

.kt-modal{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;background:rgba(30,28,50,0.45);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity 0.22s ease;}
.kt-modal--open{opacity:1;pointer-events:auto;}
.kt-no-scroll{overflow:hidden;}
.kt-modal .button{position:relative;display:flex;align-items:center;justify-content:center;width:8em;height:8em;border:none;cursor:pointer;background:transparent;outline:none;transition:filter 0.2s ease;}
.kt-modal .button:active{transform:scale(0.97);}
.kt-modal .container{position:relative;width:5.2em;height:4.6em;transform-style:preserve-3d;}
.kt-modal .folder_back_group{position:absolute;bottom:0;width:100%;height:100%;transform:translateZ(-5px);}
.kt-modal .folder_two{position:absolute;top:5%;width:38%;height:19%;border-top-left-radius:5px;border-top-right-radius:5px;background-color:rgb(221,157,0);}
.kt-modal .folder_two::before{content:"";position:absolute;left:95%;width:0;height:0;border-left:8px solid rgb(221,157,0);border-top:.4em solid transparent;border-bottom:.4em solid transparent;}
.kt-modal .folder_back{position:absolute;bottom:0;width:100%;height:88%;border-radius:5px;background-color:rgb(221,157,0);}
.kt-modal .paper{position:absolute;bottom:0;left:5%;width:90%;height:80%;border-radius:4px;transform-origin:bottom center;transition:transform 0.35s cubic-bezier(0.175,0.885,0.32,1.275);backface-visibility:hidden;}
.kt-modal .paper-1{background-color:#a1a1aa;transform:translateZ(-3px);}
.kt-modal .paper-2{background-color:#d4d4d8;transform:translateZ(-1px);}
.kt-modal .paper-3{background-color:#e4e4e7;transform:translateZ(1px);}
.kt-modal .paper-fly{position:absolute;bottom:10%;left:10%;width:80%;height:70%;background:linear-gradient(135deg,#fff,#f8fafc);border:1px solid rgba(0,0,0,0.1);border-radius:3px;opacity:0;pointer-events:none;z-index:30;box-shadow:0 4px 8px rgba(0,0,0,0.1);will-change:transform,opacity;transition:transform 0.85s cubic-bezier(0.2,0.9,0.4,1.2),opacity 0.65s ease-out;transform:translateX(0) translateY(0) translateZ(0) rotateX(0) rotateY(0) rotateZ(0);}
.kt-modal .fly-1{background:linear-gradient(145deg,#fff,#fef9e6)}.kt-modal .fly-2{background:linear-gradient(145deg,#fffef7,#f5f0e0)}.kt-modal .fly-3{background:linear-gradient(145deg,#fff,#f0f4fa)}
.kt-modal .folder_front{position:absolute;bottom:0;width:100%;height:82%;border-radius:5px;background:linear-gradient(-35deg,rgb(255,202,58),rgb(255,215,100));transform-origin:bottom center;transform:perspective(1000px) translateZ(4px) rotateX(0deg);transition:transform 0.35s cubic-bezier(0.175,0.885,0.32,1.275);will-change:transform;backface-visibility:hidden;border-top:2px solid rgba(255,255,255,0.4);box-shadow:0 2px 6px rgba(0,0,0,0.1);}
.kt-modal .folder_three{position:absolute;display:flex;align-items:center;justify-content:center;left:50%;transform:translateX(-50%);bottom:.25em;width:3.6em;height:1.3em;border-radius:4px;background:linear-gradient(-35deg,#d97706,#34d399);}
.kt-modal .folder_four{width:2.2em;height:.25em;border-radius:1em;background-color:rgba(255,255,255,0.4);}
.kt-dz:hover .paper-1,.kt-dz.kt-dz--over .paper-1{transform:perspective(1000px) translateZ(-3px) rotateX(-22deg);transition-delay:.06s;}
.kt-dz:hover .paper-2,.kt-dz.kt-dz--over .paper-2{transform:perspective(1000px) translateZ(-1px) rotateX(-32deg);transition-delay:.04s;}
.kt-dz:hover .paper-3,.kt-dz.kt-dz--over .paper-3{transform:perspective(1000px) translateZ(1px) rotateX(-40deg);transition-delay:.02s;}
.kt-dz:hover .folder_front,.kt-dz.kt-dz--over .folder_front{transform:perspective(1000px) translateZ(4px) rotateX(-48deg);}
.kt-modal .button.upload-triggered{filter:drop-shadow(0 0 6px rgba(217,119,6,0.5));}
.kt-modal__panel{position:relative;background:#fff;border-radius:28px;padding:28px 28px 24px;width:min(94vw,600px);box-shadow:0 40px 100px -20px rgba(10,8,30,.30),0 0 0 1px rgba(10,8,30,.06);transform:translateY(14px) scale(0.98);transition:transform 0.28s cubic-bezier(.2,.7,.2,1);}
.kt-modal--open .kt-modal__panel{transform:translateY(0) scale(1);}
.kt-modal__close{position:absolute;top:16px;right:16px;width:36px;height:36px;border-radius:50%;background:#fff;border:1.5px solid #e5e5ea;display:grid;place-items:center;cursor:pointer;color:#888;transition:background .15s,border-color .15s;z-index:2;}
.kt-modal__close:hover{background:#f5f5f7;border-color:#ccc;}
.kt-dz{position:relative;border:2px dashed #c8c8e0;border-radius:18px;background:#f7f7fb;height:240px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .2s,background .2s;overflow:hidden;}
.kt-dz:hover{border-color:#a0a0d0;background:#f2f2f8;}
.kt-dz.kt-dz--over{border-color:#d97706;background:#fffbeb;}
.kt-dz input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;z-index:3;}
.kt-sep{display:flex;align-items:center;gap:12px;margin:20px 0;}
.kt-sep__line{flex:1;height:1px;background:#e5e5ea;}
.kt-sep__label{font-size:13px;font-weight:500;color:#888;background:#fff;border:1.5px solid #e5e5ea;border-radius:999px;padding:4px 12px;line-height:1;}
.kt-url-row{display:flex;align-items:center;gap:0;background:#f2f2f7;border-radius:999px;padding:0 6px 0 18px;height:54px;margin-bottom:16px;}
.kt-url-row svg{flex:0 0 auto;color:#d97706;}
.kt-url-row input{flex:1;border:none;background:transparent;outline:none;font-size:15px;color:#1c1c1e;padding:0 10px;font-family:inherit;}
.kt-url-row input::placeholder{color:#aaa;}
.kt-url-submit{width:40px;height:40px;border-radius:50%;background:#d97706;border:none;display:grid;place-items:center;cursor:pointer;flex:0 0 auto;color:#fff;transition:background .15s;}
.kt-url-submit:hover{background:#b45309;}