/* ============================================================ VCOS Landing — page styles (built on Peak Agents tokens) ============================================================ */ *, *::before, *::after { box-sizing: border-box; } /* Constrain horizontal overflow at the root. `overflow-x: hidden` on alone does NOT propagate to the viewport (the document stays scrollable whenever any child overflows — notably on mobile Safari), so the clamp must live on . `clip` is preferred because, unlike `hidden`, it does not create a scroll container and therefore doesn't break `position: sticky` (the nav, .how-visual). `hidden` stays as a fallback for Safari < 16. */ html, body { overflow-x: hidden; overflow-x: clip; max-width: 100%; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--paper); color: var(--fg1); font-family: var(--font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: inherit; text-decoration: none; } img { max-width: 100%; display: block; } .wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 32px; } section { position: relative; } /* paper rhythm */ .sec-deep { background: var(--paper-deep); } .sec-slate { background: var(--dark-bg); color: var(--dark-fg1); } .hairline { border-top: 1px solid var(--line); } .eyebrow { font-family: var(--font-mono); font-weight: 500; font-size: 12px; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--green-700); display: inline-flex; align-items: center; gap: 8px; } .sec-slate .eyebrow { color: var(--green-300); } /* ---------- buttons (command-key) ---------- */ .btn { font-family: var(--font-body); font-weight: 600; font-size: 15px; letter-spacing: -.003em; border-radius: 10px; border: none; cursor: pointer; padding: 13px 22px; display: inline-flex; align-items: center; gap: 9px; line-height: 1; -webkit-font-smoothing: antialiased; transition: transform .12s var(--ease-out), box-shadow .2s var(--ease-out), background .2s; } .btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .btn.sm { padding: 9px 16px; font-size: 13px; border-radius: 8px; } .btn.lg { padding: 16px 28px; font-size: 16px; } .btn-primary { color: #fff; background: linear-gradient(180deg,#54ad81,#3f9069); box-shadow: inset 0 1px 0 rgba(255,255,255,.26), inset 0 0 0 1px rgba(36,92,69,.4), 0 1px 2px rgba(36,72,55,.25), 0 10px 22px -8px rgba(36,72,55,.5); } .btn-primary:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.32), inset 0 0 0 1px rgba(36,92,69,.5), 0 18px 30px -10px rgba(36,72,55,.55); } .btn-primary:active { transform: translateY(1px); background: linear-gradient(180deg,#3f9069,#3a8862); box-shadow: inset 0 1px 3px rgba(18,42,30,.4); } .btn-secondary { color: #F1EEE6; background: linear-gradient(180deg,#39474d,#283438); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 0 1px rgba(0,0,0,.25), 0 1px 2px rgba(16,24,26,.3), 0 10px 22px -8px rgba(16,24,26,.5); } .btn-secondary:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px var(--green-700), 0 2px 5px rgba(16,24,26,.3), 0 18px 30px -10px rgba(16,24,26,.55); } .btn-secondary:active { transform: translateY(1px); background: linear-gradient(180deg,#283438,#222c30); box-shadow: inset 0 1px 3px rgba(0,0,0,.45), inset 0 0 0 1px var(--green-800); } .btn-ghost { color: var(--ink); background: var(--surface-pure); box-shadow: inset 0 0 0 1px var(--line-strong), 0 1px 2px rgba(46,58,62,.05); } .btn-ghost:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px var(--ink-300), 0 6px 14px -6px rgba(46,58,62,.2); } .btn-ghost:active { transform: translateY(1px); background: var(--surface); box-shadow: inset 0 1px 2px rgba(46,58,62,.12); } .sec-slate .btn-ghost { color: var(--dark-fg1); background: transparent; box-shadow: inset 0 0 0 1px var(--dark-line); } .sec-slate .btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--green-300), 0 6px 14px -6px rgba(0,0,0,.4); } .btn-sand { color: #5a3c14; background: linear-gradient(180deg,#f7c089,#eda861); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 0 0 1px rgba(176,118,52,.35), 0 1px 2px rgba(120,80,30,.2), 0 10px 22px -8px rgba(176,118,52,.45); } .btn-sand:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 0 0 1px rgba(176,118,52,.45), 0 18px 30px -10px rgba(176,118,52,.5); } .btn-sand:active { transform: translateY(1px); background: linear-gradient(180deg,#eda861,#e59f57); box-shadow: inset 0 1px 3px rgba(120,80,30,.32); } /* ---------- badges / chips / tags ---------- */ .badge { font-family: var(--font-mono); font-size: 11px; font-weight: 500; padding: 4px 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 6px; } .badge .dot { width: 7px; height: 7px; border-radius: 50%; } .badge.live { background: var(--green-100); color: var(--green-800); } .badge.beta { background: var(--sand-200); color: var(--sand-600); } .tag { font-family: var(--font-mono); font-size: 11px; color: var(--ink-700); background: var(--surface-pure); border: 1px solid var(--line); padding: 5px 11px; border-radius: 8px; } /* ============================================================ NAV ============================================================ */ .nav { position: sticky; top: 0; z-index: 50; transition: background .3s var(--ease-out), box-shadow .3s var(--ease-out), backdrop-filter .3s; } .nav.scrolled { background: color-mix(in srgb, var(--paper) 80%, transparent); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; } .lockup { display: flex; align-items: center; gap: 11px; } .lockup img { height: 38px; width: auto; } .lockup .wm { display: flex; flex-direction: column; line-height: .9; letter-spacing: -.02em; } .lockup .wm .l1 { font-weight: 500; font-size: 19px; color: var(--ink-700); } .lockup .wm .l2 { font-weight: 700; font-size: 19px; color: var(--ink); } .nav-links { display: flex; align-items: center; gap: 30px; } .nav-links a { font-size: 14.5px; font-weight: 500; color: var(--ink-700); transition: color .15s; } .nav-links a:hover { color: var(--ink); } .nav-cta { display: flex; align-items: center; gap: 12px; } @media (max-width: 860px) { .nav-links { display: none; } } /* ============================================================ HERO ============================================================ */ .hero { padding: 64px 0 88px; position: relative; } .hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; } .hero-eyebrow { margin-bottom: 22px; } .hero h1 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.9rem, 5.4vw, var(--text-4xl)); line-height: 1.02; letter-spacing: var(--track-display); margin: 0 0 24px; color: var(--ink); } .hero h1 em { font-style: italic; color: var(--green-700); } .hero .lead { font-size: var(--text-md); line-height: var(--lh-normal); color: var(--fg2); max-width: 30em; margin: 0 0 30px; } .hero .lead em { font-family: var(--font-display); font-style: italic; color: var(--ink); } .hero-actions { display: flex; gap: 13px; flex-wrap: wrap; align-items: center; } .hero-trust { display: flex; align-items: center; gap: 18px; margin-top: 30px; flex-wrap: wrap; } .hero-trust .t { font-family: var(--font-mono); font-size: 11.5px; color: var(--fg3); letter-spacing: .02em; display: flex; align-items: center; gap: 7px; } .hero-trust svg { width: 14px; height: 14px; stroke: var(--green-700); fill: none; stroke-width: 2; } /* ---------- hero chat mock ---------- */ .chat { background: var(--dark-bg); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid var(--dark-line); } .chat-bar { display: flex; align-items: center; gap: 8px; padding: 13px 16px; border-bottom: 1px solid var(--dark-line); } .chat-bar .lights { display: flex; gap: 6px; } .chat-bar .lights i { width: 10px; height: 10px; border-radius: 50%; display: block; } .chat-bar .title { font-family: var(--font-mono); font-size: 11px; color: var(--dark-fg3); margin-left: 6px; letter-spacing: .03em; } .chat-bar .vbadge { margin-left: auto; font-family: var(--font-mono); font-size: 10px; color: var(--green-300); border: 1px solid var(--dark-line); padding: 3px 8px; border-radius: 999px; } .chat-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; } .msg { display: flex; gap: 11px; align-items: flex-start; } .msg .av { width: 28px; height: 28px; border-radius: 8px; flex: none; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 11px; font-weight: 600; } .msg.user .av { background: var(--dark-line); color: var(--dark-fg1); } .msg.agent .av { background: var(--green-800); color: #eafff2; } .msg .bub { font-size: 13.5px; line-height: 1.5; color: var(--dark-fg1); padding-top: 4px; } .msg.user .bub { color: var(--dark-fg2); } .msg .bub .who { font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--dark-fg3); display: block; margin-bottom: 4px; } .tool-call { margin-top: 9px; background: rgba(255,255,255,.03); border: 1px solid var(--dark-line); border-radius: 10px; padding: 10px 12px; font-family: var(--font-mono); font-size: 11px; color: var(--dark-fg2); display: flex; flex-direction: column; gap: 8px; } .tool-call .tline { display: flex; align-items: center; gap: 8px; line-height: 1.4; white-space: nowrap; overflow: hidden; } .tool-call .path { overflow: hidden; text-overflow: ellipsis; } .tool-call .tline svg { width: 13px; height: 13px; stroke: var(--green-300); fill: none; stroke-width: 2; flex: none; } .tool-call .path { color: var(--green-300); } .typing { display: inline-flex; gap: 4px; align-items: center; padding: 5px 0; } .typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--green-300); animation: blink 1.4s infinite both; } .typing i:nth-child(2) { animation-delay: .2s; } .typing i:nth-child(3) { animation-delay: .4s; } @keyframes blink { 0%,80%,100% { opacity: .25; } 40% { opacity: 1; } } .chat-input { margin: 0 18px 18px; display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.04); border: 1px solid var(--dark-line); border-radius: 12px; padding: 11px 14px; } .chat-input .ph { font-size: 13px; color: var(--dark-fg3); flex: 1; } .chat-input .send { width: 28px; height: 28px; border-radius: 8px; background: var(--green); display: flex; align-items: center; justify-content: center; } .chat-input .send svg { width: 14px; height: 14px; stroke: #fff; fill: none; stroke-width: 2.4; } /* ============================================================ SECTION HEADERS ============================================================ */ .sec-pad { padding: 88px 0; } .sec-head { max-width: 720px; margin-bottom: 52px; } .sec-head.center { margin-left: auto; margin-right: auto; text-align: center; } .sec-head .eyebrow { margin-bottom: 18px; } .sec-head h2 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-2xl); line-height: 1.08; letter-spacing: var(--track-tight); margin: 0 0 16px; color: inherit; } .sec-head h2 em { font-style: italic; color: var(--green-700); } .sec-slate .sec-head h2 em { color: var(--green-300); } .sec-head p { font-size: var(--text-md); line-height: var(--lh-normal); color: var(--fg2); margin: 0; } .sec-slate .sec-head p { color: var(--dark-fg2); } /* ============================================================ PROBLEM ============================================================ */ .problem { padding: 96px 0; } .problem-inner { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: center; } .problem h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.2rem, 4vw, 3.1rem); line-height: 1.05; letter-spacing: var(--track-tight); margin: 18px 0 0; color: var(--dark-fg1); } .problem h2 em { font-style: italic; color: var(--green-300); } .problem-side p { font-size: var(--text-md); line-height: var(--lh-normal); color: var(--dark-fg2); margin: 0 0 18px; } .problem-side p strong { color: var(--dark-fg1); font-weight: 600; } .problem-stats { display: flex; gap: 14px; margin-top: 26px; flex-wrap: wrap; } .pstat { flex: 1; min-width: 130px; background: rgba(255,255,255,.04); border: 1px solid var(--dark-line); border-radius: 14px; padding: 18px; } .pstat .n { font-family: var(--font-display); font-size: 2rem; color: var(--green-300); line-height: 1; margin-bottom: 8px; } .pstat .l { font-size: 12.5px; color: var(--dark-fg2); line-height: 1.4; } /* ============================================================ HOW IT WORKS ============================================================ */ .how-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 56px; align-items: start; } .steps { display: flex; flex-direction: column; gap: 8px; } .step { display: flex; gap: 18px; padding: 22px; border-radius: var(--r-md); border: 1px solid transparent; transition: background .2s, border-color .2s; } .step:hover { background: var(--surface-pure); border-color: var(--line); } .step .num { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--green-800); background: var(--green-100); width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex: none; } .step h3 { font-family: var(--font-body); font-weight: 600; font-size: var(--text-lg); margin: 2px 0 7px; color: var(--ink); letter-spacing: -.01em; } .step p { font-size: 14.5px; line-height: 1.55; color: var(--fg2); margin: 0; } .step p code { font-family: var(--font-mono); font-size: 12.5px; background: var(--cool-50); padding: 1px 6px; border-radius: 5px; color: var(--ink-700); } .step-note { display: flex; gap: 9px; align-items: flex-start; margin-top: 11px; font-size: 13.5px; line-height: 1.5; color: var(--green-800); background: var(--green-100); border-radius: 9px; padding: 9px 12px; } .step-note svg { width: 15px; height: 15px; stroke: var(--green-800); fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; flex: none; margin-top: 2px; } .step-note strong { font-weight: 600; } /* visual panel (swappable) */ .how-visual { position: sticky; top: 96px; } .viz { display: none; } .viz.active { display: block; } /* repo file tree */ .repo { background: var(--dark-bg); border-radius: var(--r-lg); border: 1px solid var(--dark-line); overflow: hidden; box-shadow: var(--shadow-md); } .repo-bar { display: flex; align-items: center; gap: 9px; padding: 13px 16px; border-bottom: 1px solid var(--dark-line); font-family: var(--font-mono); font-size: 11.5px; color: var(--dark-fg2); } .repo-bar svg { width: 14px; height: 14px; stroke: var(--green-300); fill: none; stroke-width: 2; } .repo-bar .branch { margin-left: auto; color: var(--dark-fg3); } .repo-tree { padding: 14px 8px; font-family: var(--font-mono); font-size: 12.5px; } .tnode { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 7px; color: var(--dark-fg2); } .tnode:hover { background: rgba(255,255,255,.04); } .tnode svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; flex: none; } .tnode.dir { color: var(--green-300); } .tnode.file { color: var(--dark-fg2); } .tnode .meta { margin-left: auto; font-size: 10.5px; color: var(--dark-fg3); } .tnode.i1 { padding-left: 28px; } .tnode.i2 { padding-left: 48px; } /* terminal */ .term { background: var(--dark-bg); border-radius: var(--r-lg); border: 1px solid var(--dark-line); overflow: hidden; box-shadow: var(--shadow-md); } .term-bar { display: flex; align-items: center; gap: 7px; padding: 12px 15px; border-bottom: 1px solid var(--dark-line); } .term-bar i { width: 10px; height: 10px; border-radius: 50%; } .term-bar .title { font-family: var(--font-mono); font-size: 11px; color: var(--dark-fg3); margin-left: 6px; } .term-body { padding: 16px 18px; font-family: var(--font-mono); font-size: 12.5px; line-height: 1.75; } .term-body .line { color: var(--dark-fg2); white-space: pre-wrap; } .term-body .pr { color: var(--green-300); } .term-body .cm { color: var(--dark-fg1); } .term-body .ok { color: var(--green-300); } .term-body .dim { color: var(--dark-fg3); } .term-body .cursor { display: inline-block; width: 8px; height: 15px; background: var(--green-300); vertical-align: -2px; animation: blink 1.1s step-end infinite; } /* graph */ .graph-panel { background: var(--dark-bg); border-radius: var(--r-lg); border: 1px solid var(--dark-line); padding: 8px; box-shadow: var(--shadow-md); } .graph-panel .glabel { font-family: var(--font-mono); font-size: 11px; color: var(--dark-fg3); padding: 8px 12px; display: flex; align-items: center; gap: 8px; } .graph-panel .glabel svg { width: 13px; height: 13px; stroke: var(--green-300); fill: none; stroke-width: 2; } .graph-svg { width: 100%; height: auto; display: block; border-radius: var(--r-md); } /* ============================================================ PILLARS ============================================================ */ .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .pillar { background: var(--surface-pure); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow-sm); transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out); } .pillar:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .pillar .ic { width: 46px; height: 46px; border-radius: 13px; background: var(--green-100); display: flex; align-items: center; justify-content: center; margin-bottom: 18px; } .pillar .ic svg { width: 23px; height: 23px; stroke: var(--green-800); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .pillar h3 { font-family: var(--font-display); font-weight: 400; font-size: var(--text-xl); margin: 0 0 10px; color: var(--ink); line-height: 1.08; } .pillar p { font-size: 14.5px; line-height: 1.55; color: var(--fg2); margin: 0 0 16px; } .pillar ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .pillar li { font-size: 13.5px; color: var(--fg2); display: flex; gap: 9px; align-items: flex-start; line-height: 1.45; } .pillar li svg { width: 15px; height: 15px; stroke: var(--green-700); fill: none; stroke-width: 2.4; flex: none; margin-top: 2px; } /* ============================================================ SECOND BRAIN ============================================================ */ .brain-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .brain-feats { display: flex; flex-direction: column; gap: 22px; margin-top: 28px; } .bfeat { display: flex; gap: 15px; } .bfeat .ic { width: 38px; height: 38px; border-radius: 11px; background: var(--surface-pure); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; flex: none; } .bfeat .ic svg { width: 19px; height: 19px; stroke: var(--green-800); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .bfeat h4 { font-family: var(--font-body); font-weight: 600; font-size: 16px; margin: 1px 0 5px; color: var(--ink); } .bfeat p { font-size: 14px; line-height: 1.55; color: var(--fg2); margin: 0; } .brain-viz { position: relative; } .bviz { display: none; } .bviz.active { display: block; } /* graph variant */ .brain-graph-panel { background: var(--dark-bg); border-radius: var(--r-xl); border: 1px solid var(--dark-line); padding: 10px; box-shadow: var(--shadow-lg); } .brain-graph-panel .glabel { font-family: var(--font-mono); font-size: 11px; color: var(--dark-fg3); padding: 10px 14px 6px; display: flex; align-items: center; gap: 8px; } .brain-graph-panel .glabel .badge { margin-left: auto; } /* notes-list variant */ .notes-panel { background: var(--surface-pure); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-md); overflow: hidden; } .notes-search { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--line); } .notes-search svg { width: 16px; height: 16px; stroke: var(--ink-500); fill: none; stroke-width: 2; } .notes-search .q { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-700); } .notes-search .q .cur { color: var(--ink-300); } .notes-search .ct { margin-left: auto; font-family: var(--font-mono); font-size: 10.5px; color: var(--fg3); } .note-row { display: flex; gap: 13px; align-items: center; padding: 13px 16px; border-bottom: 1px solid var(--line); transition: background .15s; } .note-row:last-child { border-bottom: none; } .note-row:hover { background: var(--surface); } .note-row .ic { width: 32px; height: 32px; border-radius: 9px; background: var(--cool-50); display: flex; align-items: center; justify-content: center; flex: none; } .note-row .ic svg { width: 15px; height: 15px; stroke: var(--ink-700); fill: none; stroke-width: 2; } .note-row .nb { flex: 1; min-width: 0; } .note-row .nt { font-family: var(--font-display); font-size: 16px; color: var(--ink); line-height: 1.15; } .note-row .nm { font-family: var(--font-mono); font-size: 11px; color: var(--fg3); margin-top: 2px; } .note-row .score { font-family: var(--font-mono); font-size: 11px; color: var(--green-800); background: var(--green-100); padding: 3px 8px; border-radius: 999px; flex: none; } /* token-cost variant */ .cost-panel { background: var(--dark-bg); border-radius: var(--r-xl); border: 1px solid var(--dark-line); padding: 26px; box-shadow: var(--shadow-lg); } .cost-panel .ct-head { font-family: var(--font-mono); font-size: 11px; color: var(--dark-fg3); letter-spacing: .05em; text-transform: uppercase; margin-bottom: 22px; display: flex; align-items: center; gap: 8px; } .cost-bar { margin-bottom: 20px; } .cost-bar .cb-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 9px; } .cost-bar .cb-l { font-size: 13.5px; color: var(--dark-fg2); } .cost-bar .cb-v { font-family: var(--font-mono); font-size: 13px; color: var(--dark-fg1); } .cost-track { height: 12px; border-radius: 999px; background: rgba(255,255,255,.06); overflow: hidden; } .cost-fill { height: 100%; border-radius: 999px; } .cost-fill.full { width: 100%; background: linear-gradient(90deg,#5a6a70,#46545a); } .cost-fill.smart { width: 34%; background: linear-gradient(90deg,#54ad81,#8FC4A8); } .cost-foot { font-size: 13px; line-height: 1.55; color: var(--dark-fg2); margin-top: 6px; padding-top: 18px; border-top: 1px solid var(--dark-line); } .cost-foot em { font-family: var(--font-display); font-style: italic; color: var(--green-300); } /* ============================================================ CONNECTORS / BRING YOUR OWN TOOLS — flow diagram ============================================================ */ .flow { position: relative; width: 100%; aspect-ratio: 1000 / 540; margin: 4px 0 46px; } .flow-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .flow-sources { display: contents; } .flow-node { position: absolute; transform: translateY(-50%); } /* category source cards (left) */ .flow-node.cat { left: 1%; width: 31%; } .cat-card { background: rgba(255,255,255,.035); border: 1px solid var(--dark-line); border-radius: var(--r-md); padding: 11px 13px; display: flex; align-items: center; gap: 11px; transition: border-color .2s, background .2s; } .cat-card:hover { border-color: var(--green-700); background: rgba(255,255,255,.06); } .cat-card .ci { width: 30px; height: 30px; border-radius: 9px; background: rgba(143,196,168,.14); display: flex; align-items: center; justify-content: center; flex: none; } .cat-card .ci svg { width: 16px; height: 16px; stroke: var(--green-300); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .cat-card .cl { font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--dark-fg2); flex: none; white-space: nowrap; } .cat-logos { display: flex; gap: 6px; flex: 1 1 auto; min-width: 0; flex-wrap: wrap; justify-content: flex-end; row-gap: 5px; } .logo-chip { width: 40px; height: 28px; border-radius: 7px; background: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 1px 2px rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center; flex: none; } .logo-chip img { max-width: 78%; max-height: 72%; object-fit: contain; display: block; } /* central data-stack hub */ .flow-node.hub { left: 39.5%; width: 21%; top: 50%; } .hub-card { background: linear-gradient(165deg, #2E3A3E, #232C30); border: 1.5px solid var(--green-700); border-radius: var(--r-lg); padding: 20px 16px; text-align: center; box-shadow: 0 0 0 6px rgba(72,157,115,.08), var(--shadow-lg); } .hub-card .hub-ic { width: 48px; height: 48px; border-radius: 13px; background: var(--green); display: flex; align-items: center; justify-content: center; margin: 0 auto 13px; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); } .hub-card .hub-ic svg { width: 24px; height: 24px; stroke: #fff; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .hub-card .hub-t { font-family: var(--font-display); font-size: 19px; color: var(--dark-fg1); line-height: 1.1; } .hub-card .hub-s { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .04em; color: var(--green-300); margin-top: 6px; } /* agents node (right) */ .flow-node.agents { left: 78%; width: 21%; top: 50%; } .agents-card { background: rgba(255,255,255,.035); border: 1px solid var(--dark-line); border-radius: var(--r-lg); padding: 18px 16px; } .agents-card .ag-h { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; } .agents-card .ag-h .ai { width: 30px; height: 30px; border-radius: 9px; background: var(--green-800); display: flex; align-items: center; justify-content: center; flex: none; } .agents-card .ag-h .ai svg { width: 16px; height: 16px; stroke: #eafff2; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } .agents-card .ag-h .at { font-weight: 600; font-size: 14.5px; color: var(--dark-fg1); } .agents-card .ag-h .as { font-family: var(--font-mono); font-size: 10px; color: var(--dark-fg3); } .ag-chip { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.04); border: 1px solid var(--dark-line); border-radius: 9px; padding: 8px 10px; margin-top: 7px; } .ag-chip .d { width: 6px; height: 6px; border-radius: 50%; background: var(--green-300); flex: none; } .ag-chip span { font-family: var(--font-mono); font-size: 11px; color: var(--dark-fg2); } .flow-down { display: none; } .connect-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding-top: 36px; border-top: 1px solid var(--dark-line); } .cpoint { display: flex; gap: 13px; } .cpoint .pic { width: 30px; height: 30px; border-radius: 9px; background: var(--green-800); display: flex; align-items: center; justify-content: center; flex: none; } .cpoint .pic svg { width: 16px; height: 16px; stroke: #eafff2; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .cpoint h4 { font-family: var(--font-body); font-weight: 600; font-size: 15px; margin: 2px 0 6px; color: var(--dark-fg1); } .cpoint p { font-size: 13.5px; line-height: 1.5; color: var(--dark-fg2); margin: 0; } @media (max-width: 760px) { .connect-points { grid-template-columns: 1fr; gap: 24px; } } /* ============================================================ WHY NOW ============================================================ */ .why-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .why-card { background: var(--surface-pure); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; box-shadow: var(--shadow-sm); } .why-card .k { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--green-700); margin-bottom: 14px; } .why-card h3 { font-family: var(--font-body); font-weight: 600; font-size: 17px; margin: 0 0 9px; color: var(--ink); line-height: 1.25; } .why-card p { font-size: 14px; line-height: 1.55; color: var(--fg2); margin: 0; } .why-card p em { font-family: var(--font-display); font-style: italic; color: var(--ink); } /* ============================================================ PRICING ============================================================ */ .price-toggle { display: inline-flex; background: var(--surface-pure); border: 1px solid var(--line); border-radius: 999px; padding: 4px; gap: 4px; margin: 0 auto 44px; } .price-toggle button { font-family: var(--font-body); font-weight: 600; font-size: 13.5px; border: none; background: transparent; color: var(--ink-700); padding: 9px 20px; border-radius: 999px; cursor: pointer; transition: all .2s var(--ease-out); } .price-toggle button.on { background: var(--ink); color: #fff; } .price-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; align-items: stretch; } .price-card { background: var(--surface-pure); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 28px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; } .price-card.featured { background: var(--dark-bg); border-color: var(--dark-line); color: var(--dark-fg1); box-shadow: var(--shadow-lg); position: relative; } .price-card .pc-eye { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--green-700); margin-bottom: 14px; } .price-card.featured .pc-eye { color: var(--green-300); } .price-card .pc-name { font-family: var(--font-display); font-size: var(--text-lg); margin: 0 0 6px; color: var(--ink); } .price-card.featured .pc-name { color: var(--dark-fg1); } .price-card .pc-sub { font-size: 13.5px; color: var(--fg3); line-height: 1.45; margin-bottom: 22px; min-height: 38px; } .price-card.featured .pc-sub { color: var(--dark-fg2); } .price-card .pc-price { display: flex; align-items: baseline; gap: 6px; margin-bottom: 4px; } .price-card .pc-amt { font-family: var(--font-display); font-size: 2.7rem; line-height: 1; color: var(--ink); } .price-card.featured .pc-amt { color: var(--dark-fg1); } .price-card .pc-per { font-family: var(--font-mono); font-size: 12.5px; color: var(--fg3); } .price-card.featured .pc-per { color: var(--dark-fg3); } .price-card .pc-note { font-size: 12.5px; color: var(--fg3); margin: 4px 0 24px; min-height: 18px; } .price-card.featured .pc-note { color: var(--dark-fg3); } .price-card .pc-divider { border: none; border-top: 1px solid var(--line); margin: 0 0 22px; } .price-card.featured .pc-divider { border-color: var(--dark-line); } .price-card ul { list-style: none; margin: 0 0 28px; padding: 0; display: flex; flex-direction: column; gap: 12px; flex: 1; } .price-card li { font-size: 14px; line-height: 1.45; color: var(--fg2); display: flex; gap: 10px; align-items: flex-start; } .price-card.featured li { color: var(--dark-fg2); } .price-card li svg { width: 16px; height: 16px; stroke: var(--green-700); fill: none; stroke-width: 2.4; flex: none; margin-top: 2px; } .price-card.featured li svg { stroke: var(--green-300); } .price-card .btn { width: 100%; justify-content: center; } .price-feat-badge { position: absolute; top: -12px; left: 28px; } .price-foot { text-align: center; margin-top: 30px; font-size: 13.5px; color: var(--fg3); } /* ============================================================ FAQ ============================================================ */ .faq-list { max-width: 820px; margin: 0 auto; border-top: 1px solid var(--line); } .faq-item { border-bottom: 1px solid var(--line); } .faq-q { width: 100%; background: none; border: none; cursor: pointer; text-align: left; padding: 24px 4px; display: flex; align-items: center; gap: 20px; font-family: var(--font-body); font-weight: 600; font-size: 17px; color: var(--ink); letter-spacing: -.01em; } .faq-q .pm { margin-left: auto; flex: none; width: 22px; height: 22px; position: relative; transition: transform .25s var(--ease-out); } .faq-q .pm::before, .faq-q .pm::after { content: ""; position: absolute; background: var(--green-700); border-radius: 2px; } .faq-q .pm::before { top: 10px; left: 2px; right: 2px; height: 2px; } .faq-q .pm::after { left: 10px; top: 2px; bottom: 2px; width: 2px; transition: opacity .25s; } .faq-item.open .pm { transform: rotate(180deg); } .faq-item.open .pm::after { opacity: 0; } .faq-a { max-height: 0; overflow: hidden; transition: max-height .3s var(--ease-out); } .faq-a-inner { padding: 0 4px 26px; font-size: 15px; line-height: 1.6; color: var(--fg2); max-width: 64ch; } .faq-a-inner code { font-family: var(--font-mono); font-size: 13px; background: var(--cool-50); padding: 1px 6px; border-radius: 5px; } /* ============================================================ FINAL CTA ============================================================ */ .cta-final { padding: 96px 0; text-align: center; } .cta-final .eyebrow { margin-bottom: 20px; } .cta-final h2 { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.3rem, 4.5vw, 3.4rem); line-height: 1.04; letter-spacing: var(--track-tight); margin: 0 auto 22px; max-width: 16ch; color: var(--dark-fg1); } .cta-final h2 em { font-style: italic; color: var(--green-300); } .cta-final p { font-size: var(--text-md); color: var(--dark-fg2); max-width: 46ch; margin: 0 auto 34px; line-height: 1.55; } .cta-final .hero-actions { justify-content: center; } /* ============================================================ FOOTER ============================================================ */ .footer { background: var(--dark-bg); color: var(--dark-fg2); border-top: 1px solid var(--dark-line); padding: 52px 0 38px; } .footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 40px; flex-wrap: wrap; } .footer .lockup .wm .l1 { color: var(--dark-fg2); } .footer .lockup .wm .l2 { color: var(--dark-fg1); } .footer .endorse { font-family: var(--font-mono); font-size: 10px; color: var(--dark-fg3); margin-top: 8px; letter-spacing: .03em; } .footer-links { display: flex; gap: 56px; flex-wrap: wrap; } .footer-col h5 { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--dark-fg3); margin: 0 0 14px; font-weight: 500; } .footer-col a { display: block; font-size: 14px; color: var(--dark-fg2); margin-bottom: 10px; transition: color .15s; } .footer-col a:hover { color: var(--dark-fg1); } .footer-bottom { margin-top: 44px; padding-top: 24px; border-top: 1px solid var(--dark-line); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 11px; color: var(--dark-fg3); } /* ============================================================ CONTACT MODAL ============================================================ */ .modal-overlay { position: fixed; inset: 0; z-index: 200; background: rgba(35,44,48,.55); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; pointer-events: none; transition: opacity .25s var(--ease-out); } .modal-overlay.open { opacity: 1; pointer-events: auto; } .modal { background: var(--paper); border-radius: var(--r-xl); width: 100%; max-width: 460px; box-shadow: var(--shadow-lg); border: 1px solid var(--line); transform: translateY(14px) scale(.98); transition: transform .28s var(--ease-out); overflow: hidden; } .modal-overlay.open .modal { transform: translateY(0) scale(1); } .modal-head { padding: 28px 30px 0; position: relative; } .modal-head .eyebrow { margin-bottom: 12px; } .modal-head h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.9rem; line-height: 1.05; margin: 0 0 8px; color: var(--ink); } .modal-head h3 em { font-style: italic; color: var(--green-700); } .modal-head p { font-size: 14px; line-height: 1.5; color: var(--fg2); margin: 0; } .modal-close { position: absolute; top: 20px; right: 20px; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line); background: var(--surface-pure); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; } .modal-close:hover { background: var(--surface); } .modal-close svg { width: 16px; height: 16px; stroke: var(--ink-700); fill: none; stroke-width: 2; } .modal-body { padding: 24px 30px 30px; display: flex; flex-direction: column; gap: 15px; } .field { display: flex; flex-direction: column; gap: 7px; } .field label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-700); } .field input { font-family: var(--font-body); font-size: 15px; color: var(--ink); background: var(--surface-pure); border: 1px solid var(--line-strong); border-radius: 10px; padding: 12px 14px; transition: border-color .15s, box-shadow .15s; } .field input::placeholder { color: var(--ink-300); } .field input:focus { outline: none; border-color: var(--green); box-shadow: var(--shadow-focus); } .field.err input { border-color: var(--danger); } .field .msg { font-size: 12px; color: var(--danger); min-height: 0; } .modal-body .btn { width: 100%; justify-content: center; margin-top: 4px; } .modal-body .btn.loading { opacity: .65; pointer-events: none; } .form-error { font-size: 13px; line-height: 1.5; color: var(--danger); text-align: center; margin: -2px 0 0; } .modal-success { padding: 44px 30px 48px; text-align: center; } .modal-success .ok-ic { width: 60px; height: 60px; border-radius: 50%; background: var(--green-100); display: flex; align-items: center; justify-content: center; margin: 0 auto 20px; } .modal-success .ok-ic svg { width: 30px; height: 30px; stroke: var(--green-800); fill: none; stroke-width: 2.4; } .modal-success h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.7rem; margin: 0 0 10px; color: var(--ink); } .modal-success p { font-size: 14.5px; line-height: 1.55; color: var(--fg2); margin: 0 auto; max-width: 32ch; } /* ============================================================ INTENSITY: BOLD variant overrides (data-intensity="bold") ============================================================ */ [data-intensity="bold"] .hero h1 { font-size: clamp(3.2rem, 6.2vw, var(--text-5xl)); } [data-intensity="bold"] .hero { padding-top: 48px; } [data-intensity="bold"] .sec-head h2 { font-size: clamp(2.5rem, 4.6vw, var(--text-3xl)); } [data-intensity="bold"] .pillar { background: var(--dark-bg); border-color: var(--dark-line); color: var(--dark-fg1); } [data-intensity="bold"] .pillar h3 { color: var(--dark-fg1); } [data-intensity="bold"] .pillar p { color: var(--dark-fg2); } [data-intensity="bold"] .pillar li { color: var(--dark-fg2); } [data-intensity="bold"] .pillar li svg { stroke: var(--green-300); } [data-intensity="bold"] .pillar .ic { background: rgba(143,196,168,.16); } [data-intensity="bold"] .pillar .ic svg { stroke: var(--green-300); } [data-intensity="bold"] .pillar:hover { box-shadow: var(--shadow-lg); } [data-intensity="bold"] .hero-eyebrow .eyebrow, [data-intensity="bold"] .sec-head .eyebrow { font-size: 13px; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 980px) { .hero-grid, .problem-inner, .how-grid, .brain-grid { grid-template-columns: 1fr; gap: 40px; } .how-visual { position: static; } .pillars, .why-grid, .price-grid { grid-template-columns: 1fr; } .problem h2 { margin-top: 0; } } @media (max-width: 860px) { .flow { aspect-ratio: auto; display: flex; flex-direction: column; gap: 12px; margin-bottom: 40px; } .flow-svg { display: none; } .flow-sources { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; } .flow-node { position: static; transform: none; left: auto; top: auto; width: auto !important; } .flow-node.cat, .flow-node.hub, .flow-node.agents { width: auto !important; } .flow-node.hub, .flow-node.agents { max-width: 420px; width: 100% !important; margin: 0 auto; } .flow-down { display: flex; justify-content: center; } .flow-down svg { width: 24px; height: 24px; stroke: var(--green-300); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } } @media (max-width: 620px) { .wrap { padding: 0 20px; } .sec-pad, .problem, .cta-final, .hero { padding: 60px 0; } .hero { padding-top: 40px; } .flow-sources { grid-template-columns: 1fr; } }