/* Landing page visual refresh. Structure and behavior remain in landing.html. */

:root {
    --bg: #f7f6f2;
    --bg-alt: #efeee8;
    --surface: #ffffff;
    --ink: #20211f;
    --ink-soft: #565852;
    --muted: #7c7f77;
    --line: #dedfd9;
    --line-soft: #ebebe6;
    --accent: #dc5b24;
    --accent-dk: #b94317;
    --accent-sf: #fff0e8;
    --green: #287a4b;
    --green-sf: #eaf5ee;
    --red: #b83f39;
    --red-sf: #fff0ee;
    --shadow: 0 1px 2px rgba(27, 30, 25, 0.05);
    --shadow-lg: 0 22px 56px rgba(27, 30, 25, 0.12);
    --radius: 16px;
}

body {
    font-family: Inter, Aptos, "Segoe UI", system-ui, -apple-system, sans-serif;
    background: var(--bg);
    color: var(--ink);
    line-height: 1.55;
    text-rendering: optimizeLegibility;
}

::selection {
    color: var(--ink);
    background: #ffd8c3;
}

.wrap,
.inner,
.footer-inner {
    max-width: 1160px;
}

/* Navigation */
.nav-outer {
    background: rgba(255, 255, 255, 0.92);
    border-color: var(--line);
    box-shadow: 0 1px 0 rgba(27, 30, 25, 0.02);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
}

.nav {
    max-width: 1200px;
    min-height: 68px;
    padding: 10px 20px;
}

.nav-logo { gap: 11px; }

.brand-lockup {
    position: relative;
    display: block;
    width: 220px;
    height: 44px;
    overflow: hidden;
    flex-shrink: 0;
}

.brand-lockup img {
    position: absolute;
    top: -109px;
    left: -25px;
    width: 270px;
    height: 270px;
    max-width: none;
}

.nav-logo-icon {
    width: 34px;
    height: 34px;
    display: block;
    filter: drop-shadow(0 1px 1px rgba(27, 30, 25, 0.08));
}

.nav-logo-text,
.footer-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    font-family: Aptos, "Segoe UI", system-ui, -apple-system, sans-serif;
}

.nav-logo-text .brand,
.footer-logo-text .brand {
    font-size: 17px;
    font-weight: 750;
    color: var(--ink);
    letter-spacing: -0.03em;
}

.nav-logo-text .sub,
.footer-logo-text .sub {
    font-size: 9px;
    font-weight: 750;
    color: var(--accent);
    text-transform: uppercase;
    letter-spacing: 0.13em;
}

.nav-center { gap: 2px; }

.nav-center a,
.nav-right .login {
    color: var(--ink-soft);
    border-radius: 8px;
    font-size: 13.5px;
    font-weight: 570;
}

.nav-center a:hover,
.nav-right .login:hover {
    color: var(--ink);
    background: var(--bg-alt);
}

.btn,
.btn-line {
    min-height: 42px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 650;
    letter-spacing: -0.01em;
}

.btn {
    background: var(--accent);
    border-color: var(--accent);
}

.btn:hover {
    background: var(--accent-dk);
    border-color: var(--accent-dk);
    box-shadow: 0 8px 20px rgba(185, 67, 23, 0.18);
}

.btn-line {
    color: var(--ink);
    background: rgba(255, 255, 255, 0.7);
    border-color: var(--line);
}

.btn-line:hover {
    color: var(--ink);
    background: #fff;
    border-color: var(--line);
    box-shadow: var(--shadow);
}

/* Hero */
.hero {
    padding: 104px 24px 74px;
    isolation: isolate;
}

.hero::before {
    background: radial-gradient(ellipse 58% 42% at 50% 6%, rgba(220, 91, 36, 0.11), transparent 72%);
}

.hero::after {
    background-image:
        linear-gradient(to right, rgba(32, 33, 31, 0.055) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(32, 33, 31, 0.055) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.9) 58%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.9) 58%, transparent 100%);
}

.eyebrow {
    margin-bottom: 28px;
    padding: 7px 13px;
    color: var(--ink-soft);
    background: rgba(255, 255, 255, 0.82);
    border-color: var(--line);
    border-radius: 8px;
    box-shadow: none;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.eyebrow .dot {
    width: 6px;
    height: 6px;
    box-shadow: none;
}

.hero h1 {
    max-width: 900px;
    margin-bottom: 26px;
    font-size: clamp(44px, 6.5vw, 76px);
    font-weight: 760;
    line-height: 0.99;
    letter-spacing: -0.055em;
}

.hero h1 .mark { color: var(--accent); }
.hero h1 .mark::after { display: none; }

.hero .lede {
    max-width: 650px;
    margin-bottom: 36px;
    color: var(--ink-soft);
    font-size: clamp(16px, 1.8vw, 19px);
    line-height: 1.65;
}

.hero-cta { gap: 10px; }
.hero-note { margin-top: 16px; font-size: 12.5px; }

.hero-proof {
    margin-top: 38px;
    padding: 8px 12px;
    background: rgba(255, 255, 255, 0.62);
    border: 1px solid rgba(222, 223, 217, 0.8);
    border-radius: 999px;
}

.proof-avatars span { border-color: #fff; }
.proof-stars { color: var(--accent); }

.hero-visual {
    max-width: 1060px;
    margin-top: 66px;
}

.hero-visual::before { display: none; }

.app-window {
    border-color: #d2d4cc;
    border-radius: 18px;
    box-shadow: 0 28px 70px rgba(27, 30, 25, 0.14), 0 2px 5px rgba(27, 30, 25, 0.06);
}

.app-bar {
    padding: 12px 16px;
    background: #f1f0eb;
    border-color: var(--line);
}

.app-dots span { width: 9px; height: 9px; }

.app-url {
    background: rgba(255, 255, 255, 0.72);
    border-color: var(--line);
    border-radius: 6px;
}

.app-body { grid-template-columns: 194px 1fr; min-height: 390px; }
.app-side { background: #f8f7f3; }

.app-brand-logo {
    width: 25px;
    height: 25px;
    background: transparent;
}

.app-brand-logo img { display: block; width: 100%; height: 100%; }

.app-nav-item { color: var(--muted); }
.app-nav-item.active { color: var(--ink); background: #e9e8e2; }
.app-main { padding: 24px; }
.app-main-title { font-size: 16px; }

.app-chip {
    color: var(--accent-dk);
    background: var(--accent-sf);
    border: 1px solid #f3cdbb;
}

.app-col {
    background: #f3f2ed;
    border-color: var(--line);
    border-radius: 10px;
}

.app-lead {
    border-color: var(--line);
    box-shadow: 0 1px 1px rgba(27, 30, 25, 0.03);
}

.app-float {
    right: -12px;
    bottom: -28px;
    border-color: var(--line);
    border-radius: 14px;
    box-shadow: 0 18px 46px rgba(27, 30, 25, 0.16);
}

.app-float-ic { background: var(--ink); }
.app-float-msg { background: var(--bg-alt); }

/* Workflow strip */
.flow-wrap { padding: 8px 24px 96px; }

.flow-card {
    max-width: 1060px;
    padding: 34px 36px;
    border-color: var(--line);
    border-radius: 16px;
    box-shadow: none;
}

.eyebrow-line { font-size: 11px; }

.flow-steps {
    align-items: stretch;
    gap: 10px;
}

.flow-step {
    align-items: flex-start;
    padding: 14px;
    background: #faf9f6;
    border: 1px solid var(--line);
    border-radius: 12px;
}

.flow-box {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    background: var(--bg-alt);
}

.flow-box .material-icons { font-size: 22px; }
.flow-n { top: -7px; right: -7px; width: 20px; height: 20px; }
.flow-name,
.flow-desc { text-align: left; }
.flow-arr { padding-top: 30px; }

/* Shared sections */
.section {
    position: relative;
    padding: 104px 24px;
}

.section.alt {
    background: rgba(239, 238, 232, 0.75);
    border-color: var(--line);
}

.s-eyebrow {
    margin-bottom: 14px;
    font-size: 11px;
    letter-spacing: 0.1em;
}

.s-h2 {
    max-width: 760px;
    font-size: clamp(32px, 4.8vw, 52px);
    font-weight: 740;
    line-height: 1.06;
    letter-spacing: -0.045em;
}

.s-h2 .mark { color: var(--accent); }

.s-sub {
    max-width: 640px;
    margin-bottom: 52px;
    color: var(--ink-soft);
    font-size: 16px;
}

.ps-grid { gap: 14px; margin-bottom: 64px; }

.ps-card {
    min-height: 280px;
    padding: 34px;
    border-color: var(--line);
    border-radius: 16px;
    box-shadow: none;
}

.ps-card.solution {
    background: var(--ink);
    border-color: var(--ink);
}

.ps-card.solution h3 { color: #fff; }
.ps-card.solution p { color: rgba(255, 255, 255, 0.67); }

.icon-box {
    width: 46px;
    height: 46px;
    border-radius: 10px;
}

.ps-card.solution .icon-box.green { background: rgba(255, 255, 255, 0.1); color: #f8a77d; }

.track-h { font-size: 11px; }
.track-grid { gap: 10px; }

.track-item {
    min-height: 155px;
    padding: 20px;
    border-color: var(--line);
    border-radius: 12px;
    flex-direction: column;
}

.track-item > .material-icons {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-sf);
    border-radius: 8px;
    font-size: 18px;
}

/* Feature showcase */
.feat-header { margin-bottom: 48px; align-items: end; }
.feat-header > p { max-width: 360px; }
.feat-cards { gap: 14px; }

.feat-card {
    border-color: var(--line);
    border-radius: 16px;
    box-shadow: none;
}

.feat-card.ai-card {
    min-height: 380px;
    background: var(--ink);
    border-color: var(--ink);
}

.feat-card:last-child {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.feat-card:last-child .feat-card-visual {
    border-right: 1px solid var(--line);
    border-bottom: 0;
}

.feat-card-visual {
    min-height: 230px;
    padding: 30px;
    background: #efeee8;
    border-color: var(--line);
}

.feat-card.ai-card .feat-card-visual {
    background: #292a27;
    border-color: rgba(255, 255, 255, 0.1);
}

.feat-card.ai-card .feat-card-content h3 { color: #fff; }
.feat-card.ai-card .feat-card-content > p:not(.feat-check) { color: rgba(255, 255, 255, 0.68); }
.feat-card.ai-card .feat-check { color: #f8a77d; }

.feat-card-content { padding: 30px; }
.feat-card-content h3 { font-size: 22px; letter-spacing: -0.025em; }

.feat-badge {
    border: 1px solid #f3cdbb;
    border-radius: 7px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mock-msg,
.mock-stage,
.mock-contact-card,
.mock-dash-card { border-color: var(--line); }

.mock-msg.ai { color: #fff; background: var(--accent); }
.mock-msg.out { background: #287a4b; }

.feat-grid { gap: 10px; }

.fg-card {
    min-height: 230px;
    padding: 26px;
    border-color: var(--line);
    border-radius: 12px;
    box-shadow: none;
}

.fg-card:hover {
    border-color: var(--line);
    box-shadow: 0 12px 28px rgba(27, 30, 25, 0.07);
    transform: translateY(-3px);
}

.fg-icon {
    width: 40px;
    height: 40px;
    border-radius: 9px;
}

/* Testimonial */
.quote-card {
    max-width: 900px;
    padding: 58px 64px;
    color: #fff;
    background: var(--ink);
    border-color: var(--ink);
    border-radius: 16px;
    box-shadow: none;
}

.quote-mark { color: var(--accent); }
.quote-card p.q { color: #fff; font-size: clamp(19px, 2.4vw, 26px); line-height: 1.55; }
.quote-avatar { background: var(--accent); }
.quote-author .name { color: #fff; }
.quote-author .role { color: rgba(255, 255, 255, 0.58); }

/* Steps */
.steps { max-width: 920px; gap: 10px; }

.step {
    align-items: flex-start;
    gap: 22px;
    padding: 24px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
}

.step:last-child { border-bottom: 1px solid var(--line); }

.step-n {
    width: 40px;
    height: 40px;
    background: var(--ink);
    border-radius: 9px;
}

.step h3 { font-size: 17px; }
.step-ai-note { border: 1px solid #f3cdbb; border-radius: 7px; }

/* FAQ */
.faq-list { max-width: 860px; display: grid; gap: 8px; }

.faq-item {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}

.faq-q { padding: 21px 22px; font-size: 15.5px; }
.faq-a { padding-inline: 22px; }
.faq-item.open .faq-a { padding: 0 22px 22px; }

/* Closing CTA and footer */
.cta-section {
    position: relative;
    isolation: isolate;
    padding: 110px 24px;
    overflow: hidden;
    background: var(--ink);
}

.cta-section::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image:
        linear-gradient(to right, rgba(255, 255, 255, 0.055) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.055) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000, transparent 70%);
    mask-image: radial-gradient(circle at 50% 50%, #000, transparent 70%);
}

.cta-section h2 {
    font-size: clamp(38px, 5vw, 60px);
    font-weight: 740;
    letter-spacing: -0.045em;
}

.cta-section h2 .mark { color: #f8a77d; }
.cta-section .btn-line { background: transparent; }

.footer {
    padding-top: 64px;
    background: #efeee8;
}

.footer-logo { gap: 11px; }
.footer-logo-icon { width: 34px; height: 34px; display: block; }
.footer-tagline { max-width: 330px; }

.float-chat {
    background: var(--accent);
    box-shadow: 0 8px 22px rgba(185, 67, 23, 0.25);
}

.float-chat:hover { box-shadow: 0 12px 28px rgba(185, 67, 23, 0.32); }

@media (max-width: 880px) {
    .section { padding-block: 82px; }
    .feat-card.ai-card { min-height: auto; }
    .feat-card:last-child { grid-template-columns: 1fr; }
    .feat-card:last-child .feat-card-visual { border-right: 0; border-bottom: 1px solid var(--line); }
    .flow-step { min-width: 31%; }
    .track-item { min-height: auto; }
}

@media (max-width: 720px) {
    .app-body { grid-template-columns: 1fr; }
    .hero-visual { margin-top: 50px; }
}

@media (max-width: 600px) {
    .nav { padding-inline: 16px; }
    .nav-right .login { display: none; }
    .nav-right .btn { padding-inline: 14px; }
    .hero { padding: 72px 18px 48px; }
    .hero h1 { font-size: clamp(40px, 12vw, 56px); }
    .hero-proof { border-radius: 14px; }
    .proof-avatars { display: none; }
    .proof-text { text-align: center; }
    .app-main { padding: 14px; }
    .app-board { gap: 7px; }
    .flow-wrap { padding: 6px 16px 72px; }
    .flow-card { padding: 24px 20px; }
    .flow-steps { display: grid; grid-template-columns: 1fr 1fr; }
    .flow-step { min-width: 0; }
    .flow-arr { display: none; }
    .section { padding: 72px 18px; }
    .s-h2 { font-size: 36px; }
    .ps-card { min-height: auto; padding: 26px; }
    .track-item { flex-direction: row; }
    .feat-card-content,
    .feat-card-visual { padding: 24px; }
    .fg-card { min-height: auto; }
    .quote-card { padding: 42px 28px; }
    .step { padding: 20px; gap: 16px; }
    .cta-section { padding: 82px 18px; }
    .footer { padding-inline: 18px; }
}

@media (max-width: 420px) {
    .flow-steps { grid-template-columns: 1fr; }
    .app-main-head { align-items: flex-start; gap: 10px; }
    .app-chip { padding-inline: 8px; }
    .mock-pipeline { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}