:root {
  --ink: #f9f0e7;
  --muted: #cbbcc0;
  --bg: #17131d;
  --line: rgba(255, 241, 229, .15);
  --glass: rgba(255, 255, 255, .075);
  font-family: Manrope, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; overflow-x: hidden; background: radial-gradient(circle at 50% -15%, #3b2337 0, #17131d 44rem); }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .3; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E"); mix-blend-mode: soft-light; z-index: 5; }
a { color: inherit; }

.ambient { position: fixed; border-radius: 50%; filter: blur(12px); pointer-events: none; opacity: .65; }
.ambient-one { width: 33rem; height: 33rem; top: 6rem; left: -21rem; background: #ba593f; }
.ambient-two { width: 28rem; height: 28rem; top: 34rem; right: -17rem; background: #7553a1; }
.ambient-three { width: 20rem; height: 20rem; bottom: -7rem; left: 21%; background: #c9974f; opacity: .27; }

.shell { width: min(1120px, calc(100% - 40px)); margin: 0 auto; position: relative; z-index: 1; }
.site-header { display: flex; align-items: center; justify-content: space-between; padding: 28px 0 0; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.brand-mark { position: relative; width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid rgba(247, 188, 104, .7); border-radius: 50%; color: #ffca7e; font: 500 8px/1 "DM Mono", monospace; }
.brand-mark i { position: absolute; height: 14px; width: 44px; border: 1px solid rgba(247, 188, 104, .75); border-radius: 50%; transform: rotate(-35deg); }
.brand-mark b { font-weight: 500; letter-spacing: -.7px; }
.brand-name { font-size: 10px; font-weight: 800; line-height: 1.05; letter-spacing: .14em; }
.header-status, .tool-count { color: #e8a872; font: 500 10px/1 "DM Mono", monospace; letter-spacing: .08em; }
.header-status { display: flex; align-items: center; gap: 8px; }
.header-status span { width: 7px; height: 7px; border-radius: 50%; background: #f3b96f; box-shadow: 0 0 14px #f3b96f; }

.hero { padding: clamp(84px, 13vw, 150px) 0 66px; max-width: 770px; }
.eyebrow, .section-label { margin: 0; color: #f3b876; font: 500 10px/1.4 "DM Mono", monospace; letter-spacing: .12em; }
.eyebrow { display: flex; gap: 9px; align-items: center; }
.pulse { width: 8px; height: 8px; border-radius: 50%; border: 1px solid #f4be80; box-shadow: 0 0 0 4px rgba(244, 190, 128, .12); }
h1, h2, h3, p { margin-top: 0; }
h1 { margin: 22px 0 25px; font-size: clamp(48px, 8.2vw, 100px); line-height: .96; letter-spacing: -.075em; font-weight: 800; }
h1 em { color: #e7a979; font-style: normal; }
.intro { max-width: 520px; color: var(--muted); font-size: clamp(15px, 2vw, 18px); line-height: 1.65; }
.jump-link { display: inline-flex; gap: 14px; align-items: center; margin-top: 17px; color: var(--ink); text-decoration: none; font: 500 11px/1 "DM Mono", monospace; letter-spacing: .1em; border-bottom: 1px solid rgba(249, 240, 231, .5); padding-bottom: 8px; transition: color .2s, border-color .2s; }
.jump-link:hover { color: #f7b975; border-color: #f7b975; }
.jump-link span { font-size: 19px; line-height: 7px; }

.glass-panel { border: 1px solid var(--line); background: linear-gradient(135deg, rgba(255,255,255,.115), rgba(255,255,255,.04)); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 15px 60px rgba(0,0,0,.16); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.mission { padding: 28px 30px; display: flex; align-items: center; justify-content: space-between; gap: 32px; border-radius: 20px; }
.mission h2, .section-heading h2 { font-size: clamp(27px, 3vw, 39px); letter-spacing: -.055em; line-height: 1; margin: 9px 0 9px; }
.mission-copy p:last-child { margin: 0; color: var(--muted); font-size: 14px; }
.mission-steps { display: flex; flex-direction: column; gap: 8px; min-width: 159px; }
.mission-steps span { color: #dfd0cb; font: 500 10px/1.15 "DM Mono", monospace; letter-spacing: .08em; }
.mission-steps b { color: #ebad71; margin-right: 8px; font-weight: 500; }

.tools { padding: 105px 0 82px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 15px; margin-bottom: 26px; }
.tool-count { margin: 0 0 7px; color: #a9989d; }
.tool-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.tool-card { isolation: isolate; min-height: 214px; border: 1px solid rgba(255,255,255,.13); border-radius: 18px; padding: 20px; display: flex; flex-direction: column; text-decoration: none; overflow: hidden; position: relative; background: rgba(255,255,255,.065); transition: transform .22s ease, border-color .22s ease, background .22s ease; }
.tool-card:hover { transform: translateY(-5px); border-color: rgba(255,255,255,.35); background: rgba(255,255,255,.1); }
.tool-card.is-pending { cursor: default; opacity: .68; }
.tool-card.is-pending:hover { transform: none; border-color: rgba(255,255,255,.13); background: rgba(255,255,255,.065); }
.card-glow { position: absolute; width: 150px; height: 150px; right: -55px; top: -66px; border-radius: 50%; filter: blur(25px); opacity: .5; z-index: -1; }
.tone-amber .card-glow { background: #cf8c32; }.tone-peach .card-glow { background: #d56676; }.tone-lilac .card-glow { background: #8c72d4; }.tone-cyan .card-glow { background: #4aafb4; }.tone-coral .card-glow { background: #d56f57; }.tone-orange .card-glow { background: #d38c3f; }
.tool-icon { width: 35px; height: 35px; color: #f8eee7; }.tool-icon svg { width: 100%; height: 100%; fill: currentColor; }.tool-icon .cut { fill: #554552; }
.tool-content { display: flex; flex-direction: column; margin-top: auto; padding-top: 28px; }.tool-topline { color: #e9b17b; font: 500 9px/1.3 "DM Mono", monospace; letter-spacing: .09em; min-height: 12px; }.tool-content strong { margin: 6px 0; font-size: 22px; letter-spacing: -.05em; line-height: 1; }.tool-content small { color: #d0c0c0; font-size: 12px; line-height: 1.4; max-width: 170px; }.tool-action { position: absolute; right: 19px; bottom: 17px; font-size: 20px; color: #f3bd84; transition: transform .2s; }.tool-card:hover .tool-action { transform: translate(2px,-2px); }.is-pending .tool-action { color: #b6a4a9; font-size: 17px; }.is-pending .tool-action::before { content: ""; position: absolute; width: 16px; height: 1px; background: currentColor; transform: rotate(-45deg); left: 0; top: 50%; }

.workflow { padding-bottom: 81px; }.flow-list { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--line); }.flow-list li { display: grid; grid-template-columns: 108px 1fr; gap: 20px; padding: 24px 0; border-bottom: 1px solid var(--line); }.flow-number { color: #efb278; font: 500 11px/1.4 "DM Mono", monospace; }.flow-list h3 { margin: 0 0 5px; font-size: 20px; letter-spacing: -.04em; }.flow-list p { margin: 0; color: var(--muted); font-size: 14px; }
.reminder { position: relative; overflow: hidden; border-radius: 19px; padding: 32px 90px 32px 30px; }.reminder-text { margin: 10px 0 0; max-width: 600px; font-size: clamp(19px, 2.5vw, 25px); line-height: 1.25; letter-spacing: -.04em; }.reminder-orbit { position: absolute; right: 20px; top: 50%; width: 82px; height: 82px; border: 1px solid #eab47d; border-radius: 50%; transform: translateY(-50%); }.reminder-orbit::after { content: ""; position: absolute; width: 107px; height: 37px; top: 20px; left: -13px; border: 1px solid rgba(234,180,125,.75); border-radius: 50%; transform: rotate(-38deg); }
footer { display: flex; justify-content: space-between; padding: 47px 0 31px; color: #9e8b91; font: 500 9px/1.4 "DM Mono", monospace; letter-spacing: .11em; } footer p { margin: 0; } footer span { color: #d5a16f; }

@media (max-width: 760px) { .shell { width: min(100% - 32px, 560px); }.header-status { font-size: 9px; }.hero { padding-top: 86px; }.mission { display: block; padding: 24px; }.mission-steps { margin-top: 23px; flex-direction: row; flex-wrap: wrap; gap: 9px 14px; }.tool-grid { grid-template-columns: repeat(2, 1fr); gap: 11px; }.tool-card { min-height: 188px; padding: 16px; }.tool-content strong { font-size: 19px; }.tool-content small { font-size: 11px; }.tools { padding: 75px 0 65px; }.workflow { padding-bottom: 65px; }.flow-list li { grid-template-columns: 62px 1fr; }.reminder { padding: 27px 74px 27px 24px; }.reminder-orbit { right: -8px; } footer { padding-top: 37px; font-size: 8px; } }
@media (max-width: 390px) { .header-status { display: none; }.tool-grid { grid-template-columns: 1fr; }.tool-card { min-height: 164px; }.tool-content { padding-top: 16px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }