/* ============================================================
   DBpia AI v20 — Landing Page Stylesheet
   v20 — marketing/SEO overhaul + logo SVG + Amplitude

   Theme:   Warm cream (#FAFAF5) + Teal Green (#13A68A)
   Font:    Pretendard Variable
   Grid:    1200px container, 8px spacing grid
   ============================================================ */


/* 1. DESIGN TOKENS
   ============================================================ */
:root {
    --bg:          #F8FDFC;
    --bg-alt:      #F0F9F7;
    --bg-card:     #FFFFFF;
    --bg-sidebar:  #F4FBF9;

    --text:           #1A1A1A;
    --text-secondary: #4A5D57;
    --text-muted:     #7A9B93;

    --accent:        #13A68A;
    --accent-hover:  #0F8C74;
    --accent-light:  #D5F0E9;
    --accent-subtle: rgba(19, 166, 138, 0.08);

    --border:       #D0E8E2;
    --border-light: #E6F7F3;

    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.06);
    --shadow-lg: 0 8px 24px rgba(0,0,0,0.08);

    --font:      'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', 'Cascadia Code', monospace;

    --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px;
    --s8:32px; --s10:40px; --s12:48px; --s16:64px; --s20:80px; --s24:96px; --s32:128px;

    --nav-h:     64px;
    --container: 1200px;
    --sidebar-w: 164px;

    --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px;

    --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
    --dur:  0.3s;
}


/* 2. RESET
   ============================================================ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html {
    scroll-behavior: smooth;
    color-scheme: light;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font);
    font-size: 17px;
    line-height: 1.65;
    color: var(--text);
    background: var(--bg);
    overflow-x: hidden;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}

main { display:block; }
a       { color:inherit; text-decoration:none; }
button, input { font:inherit; }
button  { cursor:pointer; border:none; background:none; }
ul, ol  { list-style:none; }
img     { display:block; max-width:100%; }
strong  { font-weight:600; }
button, input, a, summary { touch-action:manipulation; }
[id] { scroll-margin-top:calc(var(--nav-h) + 24px); }


/* 3. UTILITY
   ============================================================ */
.container { max-width:var(--container); margin:0 auto; padding:0 var(--s6); }

.sr-only {
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.skip-link {
    position:absolute; top:-100px; left:0; padding:var(--s3) var(--s4);
    background:var(--accent); color:#fff; font-size:14px; font-weight:600;
    z-index:200; border-radius:var(--r-sm); transition:top var(--dur) var(--ease);
}
.skip-link:focus { top:var(--s2); left:var(--s2); outline:none; }

:focus-visible { outline:2px solid var(--accent); outline-offset:3px; }


/* 4. ANIMATIONS
   ============================================================ */
.reveal {
    opacity:0; transform:translateY(28px);
    transition:opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.visible { opacity:1; transform:translateY(0); }
.reveal-d1 { transition-delay:0.10s; }
.reveal-d2 { transition-delay:0.20s; }

@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.3} }
@keyframes spin  { to{transform:rotate(360deg)} }


/* 5. NAVIGATION
   ============================================================ */
.nav {
    position:sticky; top:0; z-index:50; height:var(--nav-h);
    display:flex; align-items:center;
    background:#F7FDFC;
    border-bottom:1px solid var(--border);
}
.nav-inner {
    max-width:var(--container); margin:0 auto; padding:0 var(--s6);
    width:100%; display:flex; align-items:center; gap:var(--s8);
}

.logo { display:flex; align-items:center; flex-shrink:0; line-height:0; }
.logo-svg { height:28px; width:auto; display:block; }
.logo-svg--footer { height:24px; }

.nav-links { display:flex; align-items:center; gap:var(--s5); margin-left:auto; }
.nav-link { font-size:14px; font-weight:450; color:var(--text-secondary); white-space:nowrap; transition:color var(--dur); }
.nav-link:hover, .nav-link.is-active { color:var(--text); }
.nav-link-num { font-family:var(--font-mono); font-size:11px; color:var(--text-muted); margin-right:3px; letter-spacing:0.05em; }
.nav-divider { width:1px; height:20px; background:var(--border); flex-shrink:0; margin:0 var(--s2); }

.nav-cta {
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 20px; background:var(--accent); color:#fff;
    font-size:14px; font-weight:600; border-radius:var(--r-sm);
    white-space:nowrap; transition:background var(--dur); flex-shrink:0;
}
.nav-cta:hover { background:var(--accent-hover); }
.nav-cta svg { width:14px; height:14px; }

.mobile-toggle { display:none; flex-direction:column; gap:5px; padding:8px; margin-left:auto; }
.mobile-toggle span { display:block; width:20px; height:1.5px; background:var(--text); border-radius:2px; transition:all var(--dur); }

.mobile-menu {
    display:none; position:fixed; inset:var(--nav-h) 0 auto;
    flex-direction:column; gap:var(--s2); padding:var(--s5) var(--s6);
    background:rgba(250,250,245,0.96); border-bottom:1px solid var(--border);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:opacity 0.24s ease, transform 0.24s ease; z-index:40;
}
.mobile-menu.open { display:flex; opacity:1; transform:translateY(0); pointer-events:auto; }
.mobile-menu a { font-size:18px; font-weight:500; color:var(--text); padding:var(--s2) 0; }
.mobile-menu .mobile-cta {
    display:inline-flex; align-items:center; justify-content:center;
    width:fit-content; margin-top:var(--s3);
    padding:12px 28px; font-size:14px; font-weight:600;
    background:var(--accent); color:#fff; border-radius:var(--r-sm);
    white-space:nowrap;
}

@media (max-width:768px) {
    .nav-links, .nav-divider, .nav > .nav-inner > .nav-cta { display:none; }
    .mobile-toggle { display:flex; }
}


/* 6. HERO
   ============================================================ */
.hero { padding:calc(var(--nav-h) + var(--s20)) 0 var(--s16); text-align:center; background:#F7FDFC; }
.hero-inner { max-width:var(--container); margin:0 auto; padding:0 var(--s6); }

.hero-badge {
    display:inline-flex; align-items:center; gap:var(--s2);
    padding:6px 16px; font-size:13px; font-weight:600;
    color:var(--accent); background:var(--accent-light);
    border-radius:100px; margin-bottom:var(--s8);
}
.hero-badge-dot { width:6px; height:6px; background:var(--accent); border-radius:50%; animation:pulse 2s infinite; flex-shrink:0; }

.hero-title { font-size:clamp(42px,5.5vw,64px); font-weight:650; line-height:1.06; letter-spacing:-1.8px; color:var(--text); max-width:720px; margin:0 auto var(--s6); }
.hero-title-accent { color:var(--accent); }

.hero-desc { font-size:18px; line-height:1.6; color:var(--text-secondary); max-width:520px; margin:0 auto var(--s10); }

.hero-search { max-width:620px; margin:0 auto var(--s8); }
.hero-search-box {
    display:flex; align-items:center; gap:var(--s2);
    background:var(--bg-card); border:1.5px solid var(--border);
    border-radius:var(--r-md); padding:var(--s3) var(--s4);
    box-shadow:var(--shadow-md); transition:border-color var(--dur), box-shadow var(--dur);
}
.hero-search-box:focus-within { border-color:var(--accent); box-shadow:0 4px 20px rgba(26,122,92,0.12); }
.hero-search-input { flex:1; border:none; outline:none; background:transparent; font-size:16px; color:var(--text); min-width:0; }
.hero-search-input::placeholder { color:var(--text-muted); }
.hero-search-btn { width:40px; height:40px; display:flex; align-items:center; justify-content:center; background:var(--accent); color:#fff; border-radius:var(--r-sm); flex-shrink:0; transition:background var(--dur); }
.hero-search-btn:hover { background:var(--accent-hover); }
.hero-search-btn svg { width:18px; height:18px; }

.hero-tags { display:flex; flex-wrap:wrap; justify-content:center; gap:var(--s2); margin-top:var(--s3); }
.hero-tag { font-size:13px; color:var(--text-secondary); padding:5px 14px; border:1px solid var(--border); border-radius:100px; background:var(--bg-card); transition:border-color var(--dur), color var(--dur); }
.hero-tag:hover { border-color:var(--accent); color:var(--accent); }
.hero-sub { font-size:13px; color:var(--text-muted); margin-top:var(--s4); }


/* 7. TRUST BAR
   ============================================================ */
.trust { background:#FFFFFF; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:var(--s8) 0; }
.trust-inner { max-width:var(--container); margin:0 auto; padding:0 var(--s6); display:flex; justify-content:center; align-items:center; gap:var(--s12); flex-wrap:wrap; }
.trust-item { display:flex; flex-direction:column; align-items:center; gap:4px; }
.trust-num { font-size:24px; font-weight:700; color:var(--text); letter-spacing:-0.5px; }
.trust-label { font-size:13px; color:var(--text-muted); font-weight:450; }
.trust-div { width:1px; height:36px; background:var(--border); flex-shrink:0; }


/* 8. STATEMENT
   ============================================================ */
.statement { padding:var(--s24) 0 var(--s20); background:var(--bg-alt); }
.statement-text { font-size:clamp(24px,3.2vw,38px); font-weight:550; line-height:1.4; letter-spacing:-0.6px; max-width:900px; text-align:center; margin:0 auto; padding:0 var(--s6); }
.statement-text .bright { color:var(--text); }
.statement-text .muted  { color:var(--text-muted); }
.statement-text mark { background:var(--accent-light); color:var(--accent); padding:2px 4px; border-radius:3px; font-weight:inherit; }


/* 9. CHAPTER LAYOUT
   ============================================================ */
.chapter { padding:var(--s20) 0; }
.chapter { background:#FFFFFF; }
.chapter-alt { background:var(--bg-alt); }

.chapter-grid {
    display:grid;
    grid-template-columns:minmax(320px, 0.85fr) minmax(0, 1.15fr);
    gap:clamp(32px, 4vw, 64px);
    align-items:center;
}

.chapter-copy, .chapter-visual { min-width:0; }

.chapter-topline { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.chapter-num { font-family:var(--font-mono); font-size:12px; color:var(--text-muted); letter-spacing:0.05em; }
.chapter-badge { display:inline-flex; align-items:center; padding:6px 18px; font-size:16px; font-weight:700; color:var(--accent); background:var(--accent-light); border-radius:100px; letter-spacing:-0.2px; }
.chapter-sub-light { font-size:12px; font-weight:500; color:var(--text-muted); }

.chapter-title { margin-top:18px; font-size:clamp(36px,4.5vw,56px); font-weight:650; line-height:1.06; letter-spacing:-1.4px; text-wrap:balance; }
.chapter-title span { color:var(--accent); }

.chapter-desc { max-width:32ch; margin-top:20px; font-size:17px; line-height:1.65; color:var(--text-secondary); }

.chapter-list { margin-top:22px; display:grid; gap:14px; color:var(--text-secondary); }
.chapter-list li { padding-left:18px; position:relative; font-size:15px; line-height:1.55; }
.chapter-list li::before { content:''; position:absolute; top:9px; left:0; width:7px; height:7px; border-radius:50%; background:var(--accent); }
.chapter-list li strong { color:var(--text); }
.chapter-feature-h3 {
    font-size:15px;
    font-weight:650;
    color:var(--text);
    line-height:1.55;
    margin:0;
    display:inline;        /* keep inline with description so existing list visual is preserved */
}

.chapter-link { display:inline-flex; align-items:center; gap:6px; margin-top:var(--s5); font-size:15px; font-weight:600; color:var(--accent); transition:gap var(--dur); }
.chapter-link:hover { gap:var(--s3); }

.chapter-meta-row { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:var(--s5); }
.chapter-meta-row .chapter-link { margin-top:0; }


/* 10. PROTO-APP — Light-theme app mockups
   ============================================================ */
.proto-app {
    width:100%;
    border:1px solid var(--border);
    border-radius:var(--r-lg);
    box-shadow:var(--shadow-lg);
    overflow:hidden;
    height:700px;
    display:grid;
    grid-template-columns:var(--sidebar-w) 1fr;
    background:var(--bg-card);
}

.proto-app-split {
    grid-template-columns:var(--sidebar-w) 1fr 1fr;
}

/* Split without sidebar — for service intro protos */
.proto-split {
    width:100%;
    border:1px solid var(--border);
    border-radius:var(--r-lg);
    box-shadow:var(--shadow-lg);
    overflow:hidden;
    height:700px;
    display:grid;
    grid-template-columns:1fr 1fr;
    background:var(--bg-card);
}

/* Sidebar */
.proto-sidebar {
    width:var(--sidebar-w);
    background:var(--bg-sidebar);
    border-right:1px solid var(--border);
    padding:var(--s4);
    display:flex; flex-direction:column; gap:var(--s1);
    overflow-y:auto; flex-shrink:0;
}

.proto-sidebar-action {
    padding:7px var(--s2); font-size:13px; font-weight:500;
    color:var(--text-secondary); border-radius:6px; margin-bottom:var(--s2);
}

.proto-sidebar-title {
    font-size:11px; font-weight:600; color:var(--text-muted);
    text-transform:uppercase; letter-spacing:0.08em;
    padding:var(--s2) var(--s2) var(--s1); margin-top:var(--s2);
}

.proto-sidebar-item {
    padding:6px var(--s2); border-radius:6px;
    font-size:13px; color:var(--text-secondary);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:2px;
    transition:background var(--dur), color var(--dur);
}
.proto-sidebar-item:hover { background:var(--bg-alt); color:var(--text); }
.proto-sidebar-item.active { background:var(--accent-light); color:var(--accent); font-weight:500; }

/* Topbar */
.proto-topbar {
    height:44px; display:flex; align-items:center; gap:var(--s3);
    padding:0 var(--s5); border-bottom:1px solid var(--border);
    background:var(--bg-card); flex-shrink:0;
}
.proto-topbar-label { font-size:13px; font-weight:500; color:var(--text-secondary); }
.proto-topbar-filter { margin-left:auto; font-size:12px; color:var(--text-muted); }
.proto-topbar-badge {
    margin-left:auto; font-size:11px; font-weight:600;
    color:var(--accent); background:var(--accent-light);
    padding:3px 12px; border-radius:100px;
}

/* Content area */
.proto-content {
    padding:var(--s8) var(--s6); overflow:hidden; flex:1;
}

/* Proto text */
.proto-text {
    font-size:14px; line-height:1.8; color:var(--text-secondary); margin-bottom:var(--s4);
}
.proto-text strong { color:var(--text); }

/* Panels (Reader / DR / Idea / Viewer splits) */
.proto-panel-left {
    border-right:1px solid var(--border);
    display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden;
}
.proto-panel-right {
    background:var(--bg);
    display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden;
}

/* Page indicator */
.reader-page-indicator {
    margin-left:auto; font-family:var(--font-mono);
    font-size:11px; color:var(--text-muted);
}


/* 11. AGENT PROTO
   ============================================================ */
.agent-q-row { display:flex; align-items:flex-start; gap:var(--s3); margin-bottom:var(--s5); }
.agent-q-icon {
    width:28px; height:28px; background:var(--accent); color:#fff;
    border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center;
    font-size:13px; font-weight:700; flex-shrink:0;
}
.agent-q-text { font-size:15px; font-weight:550; color:var(--text); line-height:1.5; }

.agent-section-heading { font-size:15px; font-weight:650; color:var(--text); margin-top:18px; margin-bottom:6px; }

.agent-answer { font-size:14px; line-height:1.7; color:var(--text-secondary); margin-bottom:var(--s3); }
.agent-answer strong { color:var(--text); }

.cite-light {
    display:inline-flex; align-items:center; justify-content:center;
    width:17px; height:17px; border-radius:4px;
    background:var(--accent-light); color:var(--accent);
    font-size:10px; font-weight:700; margin:0 2px; vertical-align:middle;
}

.agent-verify {
    display:flex; align-items:flex-start; gap:var(--s3);
    padding:var(--s4); background:var(--accent-light);
    border:1px solid rgba(26,122,92,0.18);
    border-radius:var(--r-sm); margin-top:var(--s5); margin-bottom:var(--s4);
}
.agent-verify-icon {
    width:24px; height:24px; background:var(--accent); color:#fff;
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:12px; font-weight:700; flex-shrink:0;
}
.agent-verify-body { display:flex; flex-direction:column; gap:2px; }
.agent-verify-body strong { font-size:14px; color:var(--text); }
.agent-verify-body span  { font-size:12px; color:var(--text-muted); }

.agent-refs-bar {
    font-size:12px; font-weight:600; color:var(--text-muted);
    border-top:1px solid var(--border); padding-top:var(--s3); margin-bottom:var(--s2);
}

.agent-ref-row {
    display:flex; align-items:center; gap:var(--s2);
    font-size:13px; color:var(--text-secondary); padding:3px 0;
}
.agent-ref-text { flex:1; min-width:0; }
.agent-ref-meta { color:var(--text-muted); margin-left:auto; font-size:12px; white-space:nowrap; }


/* 12. DR PROTO
   ============================================================ */
.dr-question { font-size:14px; line-height:1.7; color:var(--text); margin-bottom:var(--s4); }

.dr-plan-card {
    border:1px solid var(--border); border-radius:var(--r-sm);
    background:var(--bg); padding:var(--s4);
}
.dr-plan-title { font-size:13px; font-weight:600; color:var(--text); margin-bottom:var(--s3); }

.dr-step {
    display:flex; align-items:center; gap:var(--s2);
    font-size:13px; color:var(--text-secondary); padding:3px 0;
}
.dr-step.done    { color:var(--text-muted); }
.dr-step.active  { color:var(--text); font-weight:500; }
.dr-step.pending { color:var(--text-muted); }
.dr-step-icon { color:var(--accent); font-weight:700; width:14px; text-align:center; }
.dr-step-icon.pending-icon { color:var(--border); }

.dr-spinner {
    width:12px; height:12px; border:2px solid var(--accent);
    border-top-color:transparent; border-radius:50%;
    animation:spin 1s linear infinite; flex-shrink:0;
}

.dr-progress { height:4px; background:var(--border-light); border-radius:2px; overflow:hidden; margin-top:var(--s3); }
.dr-progress-fill { height:100%; background:linear-gradient(90deg, var(--accent), #2DD4A0); border-radius:2px; }
.dr-progress-text { font-size:12px; color:var(--text-muted); margin-top:var(--s1); }

.dr-buttons { display:flex; gap:var(--s2); margin-top:var(--s4); }
.dr-btn {
    padding:7px 16px; font-size:13px; font-weight:500;
    border-radius:var(--r-sm); border:1px solid var(--border);
    background:transparent; color:var(--text-secondary);
    transition:all var(--dur);
}
.dr-btn:hover { border-color:var(--text-muted); color:var(--text); }
.dr-btn.primary { background:var(--accent); color:#fff; border-color:var(--accent); }
.dr-btn.primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); }

.dr-limit {
    display:inline-flex; align-items:center;
    font-size:13px; color:var(--text-muted);
    padding:4px 14px; border:1px solid var(--border);
    border-radius:100px; white-space:nowrap;
    line-height:1.4;
}

.dr-report-toc { display:flex; flex-direction:column; gap:var(--s2); margin-bottom:var(--s4); }
.dr-toc-item { font-size:13px; color:var(--text-secondary); padding:6px 12px; border-left:2px solid var(--border); }
.dr-toc-item.active { border-left-color:var(--accent); color:var(--text); font-weight:500; }
.dr-toc-item strong { color:var(--text-muted); margin-right:4px; }

.dr-report-stats { display:flex; gap:var(--s6); font-size:12px; color:var(--text-muted); }
.dr-report-stats strong { font-size:18px; font-weight:700; color:var(--text); }

.dr-search-log { margin-top:var(--s5); padding-top:var(--s4); border-top:1px solid var(--border); }
.dr-log-title { font-size:11px; font-weight:600; color:var(--text-muted); text-transform:uppercase; letter-spacing:0.05em; margin-bottom:var(--s3); }
.dr-log-item { display:flex; align-items:baseline; gap:var(--s3); font-size:13px; color:var(--text-secondary); padding:4px 0; border-bottom:1px solid var(--border-light); }
.dr-log-item:last-child { border-bottom:0; }
.dr-log-item.active { color:var(--accent); font-weight:500; }
.dr-log-time { font-family:var(--font-mono); font-size:11px; color:var(--text-muted); flex-shrink:0; min-width:36px; }

.dr-report-preview { margin-top:var(--s4); padding:var(--s4); border:1px solid var(--border); border-radius:var(--r-sm); background:var(--bg-card); }
.dr-preview-label { font-size:13px; font-weight:600; color:var(--accent); margin-bottom:var(--s3); }


/* 13. IDEA PROTO
   ============================================================ */
.idea-badge {
    display:inline-block; background:var(--accent); color:#fff;
    font-size:11px; font-weight:600; padding:3px 10px; border-radius:100px;
}
.idea-helper { font-size:14px; color:var(--text-secondary); margin:var(--s3) 0 var(--s4); }

.idea-topic-list { display:flex; flex-direction:column; gap:8px; }
.idea-topic-option {
    display:flex; align-items:center; gap:12px;
    padding:12px 14px; border:1px solid var(--border);
    border-radius:var(--r-sm); transition:border-color var(--dur), background var(--dur);
}
.idea-topic-option.selected { border-color:var(--accent); background:var(--accent-subtle); }

.idea-radio {
    width:16px; height:16px; border-radius:50%;
    border:2px solid var(--border); flex-shrink:0;
    transition:border-color var(--dur), background var(--dur);
}
.idea-topic-option.selected .idea-radio {
    border-color:var(--accent); background:var(--accent);
    box-shadow:inset 0 0 0 3px white;
}
.idea-topic-text { font-size:14px; color:var(--text); line-height:1.4; }

.idea-actions { display:flex; gap:var(--s2); margin-top:var(--s5); }
.idea-btn {
    padding:7px 16px; font-size:13px; font-weight:500;
    border-radius:var(--r-sm); border:1px solid var(--border);
    color:var(--text-secondary); background:transparent; transition:all var(--dur);
}
.idea-btn:hover { border-color:var(--text-muted); color:var(--text); }
.idea-btn.primary { background:var(--accent); color:#fff; border-color:transparent; }
.idea-btn.primary:hover { background:var(--accent-hover); }

.idea-ref-card {
    padding:var(--s4); border:1px solid var(--border);
    border-radius:var(--r-sm); margin-bottom:var(--s3); background:var(--bg-card);
}
.idea-ref-accuracy { font-size:11px; font-weight:600; color:var(--accent); margin-bottom:6px; }
.idea-ref-title { font-size:14px; font-weight:550; color:var(--text); line-height:1.4; margin-bottom:4px; }
.idea-ref-meta { font-size:12px; color:var(--text-muted); }


/* 14. VIEWER PROTO
   ============================================================ */
.viewer-tab {
    font-size:13px; font-weight:500; color:var(--text-muted);
    padding:4px 10px; border-radius:var(--r-sm);
    transition:background var(--dur), color var(--dur);
}
.viewer-tab.active { color:var(--accent); font-weight:600; background:var(--accent-light); }

.viewer-summary .proto-text strong { color:var(--text); }
.accent-text { color:var(--accent); }


/* 16. TESTIMONIALS
   ============================================================ */
.testimonials { padding:var(--s20) 0 var(--s24); background:var(--bg-alt); }

.testimonials-header { text-align:center; max-width:var(--container); margin:0 auto var(--s10); padding:0 var(--s6); }
.testimonials-title { font-size:clamp(28px,3.5vw,44px); font-weight:650; letter-spacing:-1px; }

.testimonials-grid { display:grid; grid-template-columns:1fr 1fr; gap:var(--s5); max-width:var(--container); margin:0 auto; padding:0 var(--s6); }

.testimonial-card {
    background:var(--bg-card); border:1px solid var(--border);
    border-radius:var(--r-lg); padding:32px;
    display:flex; flex-direction:column; min-height:220px;
    transition:transform var(--dur), box-shadow var(--dur);
}
.testimonial-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); }

.testimonial-quote { font-size:clamp(17px,2vw,21px); font-weight:500; line-height:1.55; letter-spacing:-0.2px; color:var(--text); }
.testimonial-quote strong { color:var(--accent); }
.testimonial-quote mark { background:var(--accent-light); color:var(--accent); padding:2px 4px; border-radius:3px; font-weight:inherit; }

.testimonial-author { display:flex; align-items:center; gap:8px; margin-top:auto; }
.testimonial-name { font-size:14px; font-weight:600; }
.testimonial-role { font-size:13px; color:var(--text-secondary); }

.testimonials-proof { max-width:var(--container); margin:var(--s8) auto 0; padding:0 var(--s6); display:flex; justify-content:center; align-items:center; gap:var(--s8); font-size:15px; color:var(--text-muted); }
.testimonials-proof strong { color:var(--text); font-weight:650; }
.testimonials-proof a { color:var(--accent); font-weight:600; }
.testimonials-proof a:hover { text-decoration:underline; }


/* 17. FAQ
   ============================================================ */
.faq { padding:var(--s24) 0 var(--s32); background:#FFFFFF; border-top:1px solid var(--border); }
.faq-header { text-align:center; margin-bottom:var(--s12); }
.faq-title { font-size:clamp(28px,3.5vw,44px); font-weight:650; letter-spacing:-1px; }
.faq-list { max-width:720px; margin:0 auto; padding:0 var(--s6); }
.faq-item { border-bottom:1px solid var(--border); }
.faq-item summary { display:flex; align-items:center; justify-content:space-between; padding:var(--s5) 0; font-size:16px; font-weight:550; cursor:pointer; list-style:none; gap:var(--s4); transition:color var(--dur); }
.faq-item summary:hover { color:var(--accent); }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:'+'; font-size:22px; color:var(--text-muted); flex-shrink:0; }
.faq-item[open] summary::after { content:'×'; color:var(--accent); }
.faq-answer { padding:0 0 var(--s5); font-size:15px; line-height:1.7; color:var(--text-secondary); }
.faq-answer strong { color:var(--text); }
.faq-answer p + p { margin-top:var(--s3); }


/* 18. CTA
   ============================================================ */
.cta { padding:var(--s32) 0; text-align:center; background:var(--bg-alt); }
.cta-title { font-size:clamp(36px,5vw,60px); font-weight:650; line-height:1.08; letter-spacing:-1.5px; margin-bottom:var(--s8); }
.cta-title .accent { color:var(--accent); }
.cta-buttons { display:flex; justify-content:center; gap:var(--s4); flex-wrap:wrap; }
.cta-btn-primary { display:inline-flex; align-items:center; gap:6px; padding:14px 32px; background:var(--accent); color:#fff; font-size:16px; font-weight:600; border-radius:var(--r-sm); transition:background var(--dur); }
.cta-btn-primary:hover { background:var(--accent-hover); }
.cta-btn-secondary { display:inline-flex; align-items:center; gap:6px; padding:14px 32px; border:1.5px solid var(--border); color:var(--text); font-size:16px; font-weight:600; border-radius:var(--r-sm); transition:border-color var(--dur), color var(--dur); }
.cta-btn-secondary:hover { border-color:var(--accent); color:var(--accent); }
.cta-sub { margin-top:var(--s5); font-size:14px; color:var(--text-muted); }


/* 19. FOOTER
   ============================================================ */
.footer { border-top:1px solid var(--border); padding:var(--s16) 0 var(--s10); background:#FFFFFF; }
.footer-inner { max-width:var(--container); margin:0 auto; padding:0 var(--s6); display:grid; grid-template-columns:220px repeat(3,1fr); gap:var(--s10); }
.footer-brand { display:flex; flex-direction:column; gap:var(--s2); }
.footer-tagline { font-size:14px; color:var(--text-muted); }
.footer-col h4 { font-size:13px; font-weight:650; margin-bottom:var(--s4); color:var(--text); text-transform:uppercase; letter-spacing:0.04em; }
.footer-col a { display:block; font-size:14px; color:var(--text-secondary); padding:4px 0; transition:color var(--dur); }
.footer-col a:hover { color:var(--accent); }
.footer-bottom { max-width:var(--container); margin:var(--s10) auto 0; padding:var(--s5) var(--s6) 0; border-top:1px solid var(--border); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:var(--s4); }
.footer-legal { display:flex; gap:var(--s5); }
.footer-legal a { font-size:13px; color:var(--text-muted); transition:color var(--dur); }
.footer-legal a:hover { color:var(--text); }
.footer-copy { font-size:13px; color:var(--text-muted); }


/* 20. RESPONSIVE
   ============================================================ */
@media (max-width:1080px) {
    .chapter-grid { grid-template-columns:1fr; gap:var(--s10); }
    .chapter-copy { max-width:560px; }
}

@media (max-width:768px) {
    .hero { padding-top:calc(var(--nav-h) + var(--s12)); }
    .hero-title { font-size:38px; letter-spacing:-1.2px; }
    .hero-desc { font-size:16px; }
    .hero-search { max-width:100%; }
    .statement-text { font-size:22px; }
    .chapter { padding:var(--s16) 0; }
    .chapter-title { font-size:32px; letter-spacing:-1px; }
    .chapter-desc { max-width:none; }

    .proto-app, .proto-split { grid-template-columns:1fr; height:auto; }
    .proto-app-split { grid-template-columns:1fr; }
    .proto-sidebar { display:none; }
    .proto-panel-left { border-right:none; border-bottom:1px solid var(--border); }

    .testimonials-grid { grid-template-columns:1fr; }
    .testimonials-proof { flex-direction:column; gap:var(--s3); text-align:center; }
    .cta-title { font-size:34px; }
    .footer-inner { grid-template-columns:1fr 1fr; gap:var(--s6); }
    .footer-brand { grid-column:1 / -1; }
    .footer-bottom { flex-direction:column; text-align:center; }
    .trust-inner { gap:var(--s6); }
    .trust-num { font-size:20px; }
    .trust-div { height:28px; }
}

@media (max-width:480px) {
    .hero-title { font-size:32px; letter-spacing:-1px; }
    .hero-tags { gap:6px; }
    .hero-tag { font-size:12px; padding:4px 10px; }
    .trust-inner { gap:var(--s4); }
    .trust-div { display:none; }
    .cta-buttons { flex-direction:column; align-items:center; }
    .cta-btn-primary, .cta-btn-secondary { width:100%; max-width:320px; justify-content:center; }
    .footer-inner { grid-template-columns:1fr; }
}

@media (prefers-reduced-motion:reduce) {
    html { scroll-behavior:auto; }
    *, *::before, *::after { animation:none !important; transition-duration:0.01ms !important; transition-delay:0ms !important; scroll-behavior:auto !important; }
    .reveal { opacity:1; transform:none; }
}