@font-face { font-family: 'Manrope'; src: url('/fonts/Manrope-VariableFont_wght.ttf') format('truetype'); font-weight: 200 800; font-display: swap; }
:root { --navy: #0B2545; --navy-2: #13315C; --brass: #C9A227; --brass-2: #E3C55A; --steel: #5B7A99; --ink: #1B2A3A; --mute: #5d6b7a; --line: #dfe5ec; --bg: #f5f7fa; --card: #ffffff; --good: #2E7D5B; --warn: #B7791F; --bad: #B23B3B; --radius: 14px; }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font-family: 'Manrope', system-ui, -apple-system, Segoe UI, sans-serif; color: var(--ink); background: var(--bg); line-height: 1.5; font-size: 15px; }
a { color: var(--navy-2); }
h1, h2, h3, h4 { color: var(--navy); line-height: 1.2; margin: 0 0 .5em; }
h2 { font-size: 30px; font-weight: 800; letter-spacing: -.01em; }
h3 { font-size: 18px; font-weight: 700; }
.muted { color: var(--mute); }
.small { font-size: 13px; }
.eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: 12px; font-weight: 800; color: var(--brass); margin-bottom: 8px; }
.btn { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 10px; padding: 11px 18px; font: inherit; font-weight: 700; cursor: pointer; text-decoration: none; }
.btn-brass { background: var(--brass); color: var(--navy); }
.btn-brass:hover { background: var(--brass-2); }
.btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.45); }
.btn-ghost:hover { background: rgba(255,255,255,.1); }
.btn-outline { background: #fff; color: var(--navy); border: 1px solid var(--line); }
.btn-outline:hover { border-color: var(--steel); }
/* header */
.topbar { background: var(--navy); color: #fff; position: sticky; top: 0; z-index: 20; border-bottom: 3px solid var(--brass); }
.topbar-inner { max-width: 1440px; margin: 0 auto; display: flex; align-items: center; gap: 24px; padding: 12px 28px; }
.topbar img { height: 34px; display: block; }
.topbar nav { display: flex; gap: 6px; margin-left: 16px; }
.topbar nav a { color: #dfe7f1; text-decoration: none; padding: 8px 12px; border-radius: 8px; font-weight: 600; }
.topbar nav a.active, .topbar nav a:hover { background: rgba(255,255,255,.1); color: #fff; }
.topbar .spacer { flex: 1; }
.badge { display: inline-block; border: 1px solid var(--brass); color: var(--brass-2); font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.topbar form { margin: 0; }
.topbar .user { color: #b9c6d6; font-size: 13px; }
/* footer */
.footer { background: var(--navy); color: #c8d3e0; font-size: 13px; padding: 18px 28px; border-top: 3px solid var(--brass); }
.footer-inner { max-width: 1440px; margin: 0 auto; display: flex; gap: 20px; flex-wrap: wrap; justify-content: space-between; }
.footer strong { color: #fff; }
/* landing */
.hero { position: relative; color: #fff; min-height: 560px; display: flex; align-items: center; background: var(--navy) url('/img/hero_sailor_homecoming.jpg') center 30%/cover no-repeat; }
.hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,37,69,.96) 0%, rgba(11,37,69,.86) 42%, rgba(11,37,69,.35) 100%); }
.hero-inner { position: relative; max-width: 1240px; margin: 0 auto; padding: 72px 28px; width: 100%; }
.hero h1 { color: #fff; font-size: 52px; font-weight: 800; max-width: 680px; letter-spacing: -.02em; }
.hero p.lead { font-size: 20px; color: #dfe7f1; max-width: 620px; margin: 0 0 28px; }
.hero .logo { height: 64px; margin-bottom: 26px; }
.hero .cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero .chips { display: flex; gap: 10px; margin-top: 34px; flex-wrap: wrap; }
.hero .chips span { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.2); padding: 7px 12px; border-radius: 999px; font-size: 13px; }
.section { max-width: 1240px; margin: 0 auto; padding: 64px 28px; }
.section.alt { max-width: none; background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section.alt > .inner { max-width: 1240px; margin: 0 auto; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.photo { width: 100%; border-radius: var(--radius); display: block; box-shadow: 0 10px 30px rgba(11,37,69,.18); border: 3px solid #fff; }
.quote { font-size: 22px; font-weight: 600; color: var(--navy); border-left: 4px solid var(--brass); padding-left: 18px; }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 24px; }
.step { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; border-top: 4px solid var(--steel); }
.step b { color: var(--brass); font-size: 12px; letter-spacing: .12em; }
.step h4 { margin: 6px 0; }
.stat { background: var(--navy); color: #fff; border-radius: var(--radius); padding: 22px; }
.stat .v { font-size: 34px; font-weight: 800; color: var(--brass-2); }
.stat .l { color: #c8d3e0; font-size: 13px; }
.pricing { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; }
.price { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 18px; display: flex; flex-direction: column; gap: 8px; }
.price.featured { border: 2px solid var(--brass); box-shadow: 0 10px 26px rgba(201,162,39,.18); }
.price .tier { font-weight: 800; color: var(--navy); }
.price .p { font-size: 28px; font-weight: 800; color: var(--navy); }
.price .alt { color: var(--mute); font-size: 13px; margin-top: -6px; }
.price .when { margin-top: auto; font-size: 12px; color: var(--steel); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.timeline { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; position: relative; }
.tl { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; position: relative; }
.tl .when { color: var(--brass); font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; }
.tl h4 { margin: 4px 0; font-size: 15px; }
.tl p { margin: 0; color: var(--mute); font-size: 13px; }
.tl.key { background: var(--navy); border-color: var(--navy); }
.tl.key h4 { color: #fff; } .tl.key p { color: #c8d3e0; }
.chart-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; }
.chart-box { position: relative; height: 340px; }
.chart-box.sm { height: 240px; } .chart-box.md { height: 290px; }
table.data { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data th { text-align: left; color: var(--navy); font-weight: 800; border-bottom: 2px solid var(--navy); padding: 7px 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
table.data td { border-bottom: 1px solid var(--line); padding: 7px 8px; }
table.data td.num, table.data th.num { text-align: right; font-variant-numeric: tabular-nums; }
.credits { font-size: 12px; color: var(--mute); }
/* login */
.login-body { background: var(--navy); min-height: 100vh; }
.login-wrap { display: grid; grid-template-columns: 1.2fr 1fr; min-height: 100vh; }
.login-photo { background: url('/img/hero_sailor_homecoming.jpg') center/cover; position: relative; }
.login-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,37,69,.15), rgba(11,37,69,.85)); }
.login-photo-caption { position: absolute; z-index: 1; left: 40px; bottom: 40px; color: #fff; font-size: 34px; font-weight: 800; max-width: 460px; }
.login-card { background: #fff; display: flex; flex-direction: column; justify-content: center; padding: 56px; border-left: 4px solid var(--brass); }
.login-logo { height: 52px; align-self: flex-start; margin-bottom: 26px; }
.login-card form { display: flex; flex-direction: column; gap: 14px; max-width: 380px; margin-top: 10px; }
.login-card label { display: flex; flex-direction: column; gap: 6px; font-weight: 700; color: var(--navy); font-size: 14px; }
.login-card input { font: inherit; padding: 12px 14px; border: 1px solid #c6d1dd; border-radius: 10px; }
.login-card input:focus { outline: 2px solid var(--brass); border-color: var(--brass); }
.alert { background: #fdecec; color: var(--bad); border: 1px solid #f3c2c2; padding: 10px 12px; border-radius: 10px; max-width: 380px; font-weight: 600; }
.fineprint { font-size: 12px; color: var(--mute); max-width: 380px; margin-top: 26px; }
/* app */
.app { max-width: 1680px; margin: 0 auto; padding: 18px 22px 30px; display: grid; grid-template-columns: 330px minmax(0, 1fr) 360px; gap: 18px; align-items: start; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.panel-h { padding: 14px 16px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.panel-h h3 { margin: 0; font-size: 15px; }
.panel-b { padding: 14px 16px; }
.personas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; grid-column: 1 / -1; }
.persona { text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; cursor: pointer; font: inherit; color: inherit; border-left: 4px solid var(--steel); transition: .15s; }
.persona:hover { border-color: var(--steel); box-shadow: 0 6px 16px rgba(11,37,69,.08); }
.persona.active { border-left-color: var(--brass); background: #fffaf0; border-color: var(--brass); }
.persona b { color: var(--navy); display: block; }
.persona span { font-size: 12.5px; color: var(--mute); }
.form fieldset { border: 0; border-top: 1px solid var(--line); margin: 0; padding: 12px 0 4px; }
.form legend { font-weight: 800; color: var(--navy); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; padding-right: 8px; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.form label { display: flex; flex-direction: column; font-size: 12px; color: var(--mute); font-weight: 600; gap: 3px; }
.form label.full { grid-column: 1 / -1; }
.form label.check { flex-direction: row; align-items: center; gap: 8px; color: var(--ink); }
.form input, .form select { font: inherit; font-size: 13.5px; padding: 7px 9px; border: 1px solid #ccd6e0; border-radius: 8px; color: var(--ink); background: #fff; width: 100%; }
.form input[type=checkbox] { width: auto; }
.form input:focus, .form select:focus { outline: 2px solid var(--brass); border-color: var(--brass); }
.run-bar { position: sticky; bottom: 0; background: #fff; padding: 12px 16px; border-top: 1px solid var(--line); border-radius: 0 0 var(--radius) var(--radius); }
.run-bar .btn { width: 100%; justify-content: center; }
.results { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rhead { background: var(--navy); color: #fff; border-radius: var(--radius); padding: 18px 20px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; border-bottom: 4px solid var(--brass); }
.rhead h2 { color: #fff; font-size: 22px; margin: 0; }
.rhead .meta { color: #c8d3e0; font-size: 12.5px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700; background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.25); }
.chip.ok { background: rgba(46,125,91,.25); border-color: #57b48b; }
.chip.brass { border-color: var(--brass); color: var(--brass-2); }
.kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.kpi { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px; border-top: 4px solid var(--brass); }
.kpi .v { font-size: 26px; font-weight: 800; color: var(--navy); }
.kpi .l { font-size: 12px; color: var(--mute); font-weight: 600; }
.kpi .s { font-size: 12px; color: var(--steel); }
.cols2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cols3 { display: grid; grid-template-columns: 1.1fr 1fr 1fr; gap: 16px; }
.actions { margin: 0; padding-left: 20px; }
.actions li { margin: 4px 0; }
.bar { height: 10px; background: #e7ecf2; border-radius: 99px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--brass); border-radius: 99px; width: 0; }
.bar.steel > i { background: var(--steel); }
.bar.navy > i { background: var(--navy); }
.meter { display: grid; grid-template-columns: 120px 1fr 44px; gap: 10px; align-items: center; margin: 8px 0; font-size: 13px; }
.note { border-left: 3px solid var(--steel); padding: 6px 10px; margin: 8px 0; background: #f7f9fb; border-radius: 0 8px 8px 0; font-size: 13.5px; }
.note b { color: var(--navy); }
.note.warn { border-left-color: var(--warn); background: #fff8ec; }
.note.good { border-left-color: var(--good); background: #eef8f3; }
.tag { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 800; }
.tag.out { background: #fff1d6; color: #8a5a00; } .tag.in { background: #e3f3ea; color: #1f6b48; }
.big { font-size: 30px; font-weight: 800; color: var(--navy); }
.copilot { position: sticky; top: 74px; display: flex; flex-direction: column; height: calc(100vh - 96px); min-height: 520px; }
.copilot .msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: #f7f9fb; }
.msg { max-width: 92%; padding: 10px 12px; border-radius: 12px; font-size: 13.5px; white-space: pre-wrap; }
.msg.user { align-self: flex-end; background: var(--navy); color: #fff; border-bottom-right-radius: 4px; }
.msg.bot { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.msg .src { display: block; margin-top: 6px; font-size: 11px; color: var(--steel); font-weight: 700; }
.suggest { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px; border-top: 1px solid var(--line); }
.suggest button { font: inherit; font-size: 12px; background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; cursor: pointer; color: var(--navy); }
.suggest button:hover { border-color: var(--brass); }
.ask { display: flex; gap: 8px; padding: 12px 14px; border-top: 1px solid var(--line); }
.ask input { flex: 1; font: inherit; padding: 9px 11px; border: 1px solid #ccd6e0; border-radius: 10px; }
.copilot .disc { font-size: 11px; color: var(--mute); padding: 0 14px 12px; }
.empty { padding: 50px 20px; text-align: center; color: var(--mute); }
.empty img { width: 100%; max-width: 560px; border-radius: 12px; margin-bottom: 16px; }
.hidden { display: none !important; }
.spin { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(11,37,69,.25); border-top-color: var(--navy); border-radius: 50%; animation: s 1s linear infinite; }
@keyframes s { to { transform: rotate(360deg); } }
@media (max-width: 1280px) { .app { grid-template-columns: 300px minmax(0,1fr); } .copilot { grid-column: 1 / -1; position: static; height: 560px; } .kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 900px) { .app { grid-template-columns: 1fr; } .personas, .grid2, .grid3, .grid4, .steps, .pricing, .timeline, .cols2, .cols3, .login-wrap { grid-template-columns: 1fr; } .hero h1 { font-size: 36px; } .login-photo { min-height: 220px; } }
.spacer { flex: 1; }
.cols3 > *, .cols2 > * { min-width: 0; }
@media (max-width: 1800px) { .cols3 { grid-template-columns: 1fr 1fr; } .cols3 > :nth-child(3) { grid-column: 1 / -1; } }