/* PlugICT CodeRabbit-inspired composition layer. Original CSS implementation: preserves the existing checkout and product logic. */ :root{ --paper:#070709; --paper-alt:#0d0d10; --card:#121216; --dark:#050506; --dark-line:#282832; --ink:#f7f7f8; --ink-soft:#aaaab4; --ink-mut:#92929d; --line:#282832; --line-soft:rgba(255,255,255,.08); --terracotta:#22c55e; --terracotta-bright:#4ade80; --terracotta-deep:#16a34a; --ember-glow:rgba(34,197,94,.24); --spot:rgba(34,197,94,.06); --maxw:1200px; } body{background:var(--paper);font-size:16px} nav{top:14px;width:calc(100% - 40px);max-width:1280px;margin:14px auto 0;border-radius:18px; border:1px solid rgba(255,255,255,.1);border-bottom:1px solid rgba(255,255,255,.1); background:rgba(22,22,27,.55);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%); box-shadow:0 16px 44px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06)} nav .wrap{height:68px;max-width:100%} .brand{font-size:20px;letter-spacing:-.025em} .navlinks{gap:26px;font-size:14px} .btn{border-radius:4px} .btn.primary{background:var(--terracotta);color:#041006;box-shadow:none} .btn.primary:hover{background:var(--terracotta-bright);box-shadow:0 0 32px rgba(34,197,94,.18)} .btn.ghost{border-color:var(--line);color:var(--ink-soft);background:rgba(255,255,255,.025)} .btn.ghost:hover{background:#151519;border-color:#4b4b58;color:var(--ink)} .hero .cta .btn{border-radius:999px} /* Hero: centered promise followed by a large product stage, matching the reference rhythm. */ .hero{min-height:auto;border-bottom:1px solid var(--line-soft)} .hero::before{top:-260px;right:50%;transform:translateX(50%);width:900px;height:620px;background:radial-gradient(circle,rgba(34,197,94,.12),transparent 64%)} .hero::after{opacity:.16;background:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(#000,transparent 70%)} #hero-canvas{opacity:.1} .hero .wrap.hero-stack{display:block;max-width:1280px;padding:86px 28px 0} .hero-copy{max-width:880px;margin:0 auto;text-align:center;position:relative;z-index:2} .hero-copy .eyebrow{display:inline-flex;align-items:center;gap:5px;border:1px solid rgba(34,197,94,.28);background:rgba(34,197,94,.07);padding:3px 8px;border-radius:999px;letter-spacing:.1em} .hero-copy .eyebrow::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--terracotta-bright);box-shadow:0 0 8px rgba(74,222,128,.8)} .hero h1{font:600 clamp(48px,6.2vw,82px)/.98 var(--sans);letter-spacing:-.055em;max-width:980px;margin:28px auto 0} .hero h1 .hero-line,.hero h1 em{display:block} .hero h1 em{color:var(--terracotta-bright)} .hero .sub{font-size:clamp(17px,1.7vw,22px);line-height:1.52;max-width:720px;margin:24px auto 0;color:#b9b9c2} .hero .cta{justify-content:center;margin-top:30px} .hero .cta .btn{padding:14px 24px;font-size:15px} .hero .fine{margin-top:16px;font-size:11px;text-transform:uppercase;letter-spacing:.08em} .hero-video{position:relative;margin:72px auto 0;max-width:1200px;border:1px solid #31313b;border-bottom:none;border-radius:10px 10px 0 0;background:#141419;box-shadow:0 -20px 90px rgba(0,0,0,.48),0 0 80px rgba(34,197,94,.07);overflow:hidden;text-align:left} .hero-video-frame{height:50px;display:flex;align-items:center;gap:8px;padding:0 16px;border-bottom:1px solid #2b2b34;background:#0d0d10;color:#83838f;font:500 11px var(--mono);letter-spacing:.02em} .hero-video-dot{width:8px;height:8px;border-radius:50%;background:#3a3a44} .hero-video-title{margin-left:8px;color:#c7c7cf} .hero-video-body{position:relative;aspect-ratio:16/9;background:#0b0b0e;display:flex;align-items:center;justify-content:center} .hero-video-body iframe,.hero-video-body video{position:absolute;inset:0;width:100%;height:100%;border:0;display:block} .hero-video-placeholder{max-width:460px;padding:32px;text-align:center;color:#8b8b96} .hero-video-placeholder svg{width:40px;height:40px;margin:0 auto 14px;color:#4b4b58} .hero-video-placeholder p{font-size:13px;line-height:1.6} /* Proof band replaces a generic stats line with a confidence-building section. */ .proof-band{padding:68px 28px 72px;background:var(--paper);border-bottom:1px solid var(--line-soft)} .proof-wrap{max-width:1200px;margin:0 auto;text-align:center} .proof-wrap h2{font:600 clamp(28px,3.3vw,46px)/1.08 var(--sans);letter-spacing:-.035em;max-width:760px;margin:0 auto} .proof-grid{display:grid;grid-template-columns:repeat(4,1fr);margin-top:42px;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:var(--card)} .proof-item{min-height:128px;padding:25px 18px;display:flex;flex-direction:column;justify-content:center;border-right:1px solid var(--line)} .proof-item:last-child{border-right:0} .proof-value{font:600 clamp(24px,3vw,40px)/1 var(--sans);letter-spacing:-.04em;color:var(--ink)} .proof-value.green{color:var(--terracotta-bright)} .proof-label{font:500 11px var(--mono);letter-spacing:.07em;text-transform:uppercase;color:var(--ink-mut);margin-top:10px} .integration-rail{display:flex;justify-content:center;align-items:center;gap:9px;flex-wrap:wrap;margin-top:28px;color:#92929d;font:500 10px var(--mono);letter-spacing:.06em;text-transform:uppercase} .integration-rail span{border:1px solid #292932;background:#0e0e12;border-radius:4px;padding:7px 11px;color:#9a9aa5} /* Narrative sections. */ section{padding:104px 28px} section h2{font:600 clamp(34px,4.6vw,60px)/1.03 var(--sans);letter-spacing:-.045em} .eyebrow{font-weight:600;color:var(--terracotta-bright)} .sub{color:#a2a2ad} #problem{background:var(--paper)} #problem .inner>h2{max-width:870px} #problem .inner>.sub{max-width:680px} .story{gap:16px;margin-top:48px} .panel{border-radius:6px;min-height:330px;padding:38px;background:#111115} .panel.answer{background:#0a0a0c;border-color:rgba(34,197,94,.42)} .panel .dlg{font-size:15px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.055)} .panel .dlg:last-child{border-bottom:0} /* Founder section keeps the human proof but tightens the wall of copy. */ .about-sec{background:#0d0d10;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)} .about-wrap{gap:72px;margin-top:0} .about-text h2{margin-top:16px} .about-sub{max-width:620px;color:#aaaab4} .about-name{font-family:var(--sans);font-style:normal;font-weight:600} .about-card{border-radius:6px;background:#111115;border-color:#30303a;box-shadow:none;text-align:left} .about-card-icon{margin:0 0 28px;border-radius:6px} .about-card-stat{display:grid;grid-template-columns:84px 1fr;align-items:end;padding:16px 0;margin:0;border-bottom:1px solid #292932} .about-card-num{font:600 38px/1 var(--sans)} .about-card-label{margin:0 0 3px;font-size:10px;text-transform:uppercase} .about-card-footer{font-family:var(--sans);font-style:normal} /* Bento capabilities: three compact proof cards, then deeper product context. */ #capabilities{background:var(--paper)} .cap-head{max-width:780px} .cap-head .sub{max-width:680px} .cap-list{grid-template-columns:repeat(12,1fr);gap:14px;margin-top:50px} .cap-row{grid-column:span 4;display:flex;flex-direction:column;gap:0;padding:26px;background:#111115;border-color:#292932;min-height:330px} .cap-row:nth-child(4){grid-column:span 12;min-height:auto} /* a lone card spans the row regardless of its position-based rule above */ .cap-list .cap-row:only-child{grid-column:span 12;min-height:auto} .cap-row:nth-child(5),.cap-row:nth-child(6){grid-column:span 6;min-height:300px} .cap-num{width:auto;height:auto;justify-content:flex-start;border:0;background:none;font-size:10px;letter-spacing:.12em;color:var(--terracotta-bright)} .cap-text h3{font:600 22px/1.15 var(--sans);letter-spacing:-.025em;margin-top:18px} .cap-text p{font-size:14px;margin-top:8px} .cap-visual{grid-column:auto;max-width:none;width:100%;margin-top:auto;padding-top:24px} .cap-visual.cv-graph{margin-top:32px;padding-top:0} .cv-term,.cv-cite,.cv-license{background:#09090b;border-color:#30303a} .cv-badges span{background:#0b0b0e;border-color:#30303a;border-radius:4px} .cv-graph{background:radial-gradient(ellipse 54% 46% at 50% 49%,rgba(34,197,94,.13),transparent 64%),linear-gradient(180deg,#121217,#09090c 58%,#060608)!important;border-color:#30303a!important} .kg-node{background:linear-gradient(180deg,rgba(28,28,34,.97),rgba(11,11,14,.98))!important;border-color:#3a3a45!important;color:#e5e5e9!important} .kg-node.primary{border-color:rgba(34,197,94,.48)!important} .kg-node.primary[data-id="ob"]{border-color:rgba(74,222,128,.82)!important;color:#f7f7f8!important} .kg-node .label{color:#f1f1f3!important;font-family:var(--sans)!important} .kg-pulse{fill:#4ade80} .kg-caption{background:#101014;border-color:rgba(34,197,94,.25)} /* The knowledge-graph card is visual-first — a compact label, then the film. With no body copy left, `.cap-visual`'s auto top margin and the .cv-graph 32px offset would open a gap exactly where the text used to be, so both get pinned shut. */ .kg-card{padding:22px} .kg-label{display:flex;flex-direction:column;gap:5px;margin-bottom:16px} .kg-label .eyebrow{font-size:10px;letter-spacing:.12em} .kg-label p{margin:0;font-size:13px;line-height:1.4;color:var(--ink-mut)} .kg-card .cap-visual.cv-graph{margin-top:0;padding-top:0} /* Buyer-owned AI section mirrors CodeRabbit's workflow/flexibility chapters. */ .agent-section{background:#0d0d10;border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)} .agent-head{display:grid;grid-template-columns:.82fr 1.18fr;gap:64px;align-items:end} .agent-head h2{max-width:620px} .agent-head .sub{margin:0;max-width:560px} .agent-grid{display:grid;grid-template-columns:360px minmax(0,1fr);gap:14px;margin-top:50px;align-items:start} .agent-picker,.agent-flow{border:1px solid #2b2b34;background:#111115;border-radius:6px;padding:20px} .agent-option{display:flex;align-items:center;gap:14px;padding:16px;border:1px solid rgba(34,197,94,.28);background:rgba(34,197,94,.05);border-radius:6px;color:#f2f2f4;font-size:14px} .agent-option+.agent-option{margin-top:8px} .agent-logo{position:relative;display:grid;place-items:center;width:48px;height:48px;border:1px solid rgba(34,197,94,.4);border-radius:6px;background:#0a0a0c;overflow:hidden;flex:none} .agent-logo img{width:100%;height:100%;object-fit:cover;display:block} .agent-logo-fallback{display:none;font:600 12px var(--mono);color:var(--terracotta-bright)} .agent-option small{display:block;color:#92929d;font-size:12px;margin-top:3px} .agent-flow{padding:0;overflow:hidden;background:#09090c} .flow-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid #2b2b34;font:500 10px var(--mono);color:#92929d} .flow-head b{color:var(--terracotta-bright);font-weight:500} .flow-body{padding:28px} .flow-lane{display:grid;grid-template-columns:1fr 44px 1fr 44px 1fr;align-items:center;gap:8px} .flow-node{min-height:145px;border:1px solid #30303a;border-radius:5px;background:#141419;padding:18px} .flow-node .node-kicker{font:600 10px var(--mono);letter-spacing:.1em;color:#92929d;text-transform:uppercase} .flow-node h3{font:600 17px var(--sans);margin-top:10px} .flow-node p{font-size:12px;color:#858590;line-height:1.55;margin-top:7px} .flow-arrow{text-align:center;color:var(--terracotta);font:600 18px var(--mono)} .flow-note{display:flex;align-items:flex-start;gap:10px;margin-top:20px;border-top:1px solid #282831;padding-top:18px;color:#858590;font-size:12px;line-height:1.55} .flow-note b{color:#dcdce1} /* Security and setup resemble product chapters instead of isolated generic cards. */ .banner-band{background:var(--paper);padding:20px 28px 96px} .band-card{display:block;background:#111115;border-color:#30303a;box-shadow:none;padding:34px} .priv-head{font-size:30px;letter-spacing:-.035em} .priv-grid{margin-top:24px} .priv-item{background:#0b0b0e;border-color:#2b2b34;min-height:150px} .priv-item b{font-size:16px} #setup{background:#0d0d10;border-top:1px solid var(--line-soft)} .moves{gap:14px} .move-card{background:#111115;border-color:#2b2b34;border-radius:6px;min-height:280px} .move-card .num{font-size:10px;letter-spacing:.12em} .move-card h3{font-size:21px;letter-spacing:-.02em;margin-top:18px} .move-card p{font-size:14px} #pricing{background:var(--paper)} .price-card{background:#111115;border-color:#34343e;box-shadow:none} .price-card:hover{box-shadow:0 0 45px rgba(34,197,94,.08)} .price-card .now{font-family:var(--sans);font-weight:650;letter-spacing:-.055em} #faq{background:#0d0d10;border-top:1px solid var(--line-soft)} .faq{background:#111115;border-color:#2b2b34} .final-cta{background:#070709} .final-cta h2{max-width:850px} footer{background:#0d0d10} footer .disc{color:#92929d} @media(max-width:960px){ .nav-toggle{display:grid;place-items:center} .navlinks{position:absolute;top:68px;left:0;right:0;display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:14px 22px 20px;background:rgba(22,22,27,.9);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%);border:1px solid rgba(255,255,255,.1);border-top:0;border-radius:0 0 18px 18px;transform:translateY(-130%);opacity:0;visibility:hidden;pointer-events:none;transition:transform .22s ease,opacity .22s ease,visibility 0s linear .22s} .navlinks a{width:100%;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.055)} .navlinks a:last-child{border-bottom:0} nav.nav-open .navlinks{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s} .hero-video{margin-top:54px} .proof-grid{grid-template-columns:repeat(2,1fr)} .proof-item:nth-child(2){border-right:0} .proof-item:nth-child(-n+2){border-bottom:1px solid var(--line)} .cap-row{grid-column:span 6} .cap-row:nth-child(4),.cap-row:nth-child(5),.cap-row:nth-child(6){grid-column:span 12} .agent-head{grid-template-columns:1fr;gap:18px} .agent-grid{grid-template-columns:1fr} } @media(max-width:720px){ nav{width:calc(100% - 24px);top:10px;margin-top:10px;border-radius:14px} .navlinks{border-radius:0 0 14px 14px} nav .wrap{height:64px;padding:0 12px} .brand{font-size:18px;gap:8px} .brand .mark{width:18px;height:18px} .nav-right{gap:6px} nav .btn.small{display:none} .nav-toggle{padding:4px;margin:0} .nav-toggle svg{width:22px;height:22px} .hero .wrap.hero-stack{padding:66px 16px 0} .hero h1{font-size:clamp(38px,11.4vw,46px);line-height:1.01;letter-spacing:-.05em} .hero h1 .hero-line{white-space:nowrap} .hero h1 em{max-width:350px;margin:0 auto} .hero-copy .eyebrow{max-width:100%;font-size:6.5px;letter-spacing:.08em;white-space:normal;justify-content:center} .hero .sub{font-size:16px;line-height:1.55} .hero .cta{flex-direction:column;align-items:stretch;gap:9px} .hero .cta .btn{width:100%;flex:auto} .hero .fine{font-size:9px;line-height:1.55;padding:0 8px} .hero-video{margin-top:46px;border-radius:7px 7px 0 0} .hero-video-frame{padding:0 12px} .hero-video-title{max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .hero-video-placeholder{padding:22px} .proof-band{padding:56px 16px} .proof-grid{grid-template-columns:1fr 1fr;margin-top:30px} .proof-item{min-height:108px;padding:18px 10px} .proof-value{font-size:25px} .proof-label{font-size:10px;letter-spacing:.05em} section{padding:80px 18px} section h2{font-size:clamp(34px,10vw,48px)} .panel{padding:25px;min-height:0} .about-wrap{gap:42px} .cap-list{display:block} .cap-row{margin-bottom:12px;min-height:0} .cap-row:nth-child(4){padding:20px 12px} .cv-graph{min-height:370px} /* On mobile the film is the point of this section, so the card bleeds past the section gutter to reach ~93% of the viewport. The bleed stays inside the viewport width, so nothing scrolls sideways. */ #capabilities .kg-card{margin-left:-10px;margin-right:-10px;padding:14px 6px 6px} .kg-label{margin-bottom:11px;padding:0 8px} .kg-label p{font-size:12px} /* 4/3 with the existing object-fit:cover crops the source to its middle 75% and buys a third more height. Checked against the film: the graph occupies 22-80% of frame width and the closing wordmark 27-72%, both well inside the 12.5-87.5% the crop keeps, so nothing gets clipped. */ .cv-video .kg-video{aspect-ratio:4/3} .agent-grid{margin-top:34px} .agent-picker{padding:12px} .flow-body{padding:18px} .flow-lane{grid-template-columns:1fr} .flow-arrow{transform:rotate(90deg);height:26px} .flow-node{min-height:0} .banner-band{padding:0 18px 72px} .band-card{padding:24px} } /* Refined scroll reveal: the existing IntersectionObserver adds .infade. This only changes the entrance feel; it does not touch layout, copy, or theme. */ .fadeup{ will-change:transform,opacity,filter; filter:blur(5px); transform:translateY(26px); transition:opacity .82s cubic-bezier(.22,1,.36,1),transform .82s cubic-bezier(.22,1,.36,1),filter .82s cubic-bezier(.22,1,.36,1); } .fadeup.infade{filter:blur(0)} html:not(.js) .fadeup{filter:none} /* The proof band is one observed element; cascade its four existing facts after it enters. */ .proof-item{opacity:0;transform:translateY(18px);transition:opacity .68s cubic-bezier(.22,1,.36,1),transform .68s cubic-bezier(.22,1,.36,1)} .proof-grid.infade .proof-item{opacity:1;transform:none} .proof-grid.infade .proof-item:nth-child(2){transition-delay:.08s} .proof-grid.infade .proof-item:nth-child(3){transition-delay:.16s} .proof-grid.infade .proof-item:nth-child(4){transition-delay:.24s} html:not(.js) .proof-item{opacity:1;transform:none} @media(prefers-reduced-motion:reduce){ .hero-video,.hero h1{transform:none!important} .fadeup,.proof-item{filter:none!important;opacity:1!important;transform:none!important} } /* ══ Framed hero panel ═══════════════════════════════════════════════════════ The panel starts at the very top of the page and the floating nav OVERLAYS it, so the panel's rounded corners run up behind the bar and the whole thing reads as one frame (instead of a nav pill stacked above a separate panel). */ /* the opening screen is one rounded card sitting on a light surround */ .hero-frame{background:#fff;padding:12px} /* thin bar, inset well inside the panel and sitting close to its top edge */ nav{position:fixed;left:0;right:0;top:20px;width:calc(100% - 64px);max-width:1200px; margin:0 auto;padding:0} /* one glass bar only: the