:root { --ink:#f5f7ff; --muted:#a9b4c8; --paper:#03070e; --panel:#101824; --blue:#0869ff; --cyan:#29bdff; --violet:#7445ff; --line:#202c3e; --gradient:linear-gradient(110deg,#007cff,#6444ff); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; scroll-padding-top:24px; } body { margin:0; background:var(--paper); color:var(--ink); font-family:'DM Sans',sans-serif; } a { color:inherit; text-decoration:none; } h1,h2,h3,p { margin-top:0; } h1,h2,h3 { font-family:'Space Grotesk',sans-serif; } .page-shell,.site-header { width:min(1320px,calc(100% - 72px)); margin:auto; } .site-header { min-height:92px; display:flex; align-items:center; justify-content:space-between; gap:28px; border-bottom:1px solid var(--line); } .brand { display:flex; align-items:center; gap:10px; flex-shrink:0; } .brand-symbol { display:block; width:48px; height:48px; flex-shrink:0; background-image:url('assets/closegrid-brand.jpeg'); background-size:196.28px 157.08px; background-position:-67px -9px; background-repeat:no-repeat; border-radius:7px; } .brand-name { font-family:'Space Grotesk',sans-serif; font-weight:700; letter-spacing:1.4px; font-size:21px; line-height:1.1; } .brand-name > span { color:#4775ff; } .brand-name small { display:block; color:var(--cyan); font-size:10px; letter-spacing:5px; text-align:center; margin-top:5px; } nav { display:flex; gap:30px; color:#bdc7db; font-size:14px; } nav a:hover { color:white; } .button { min-height:50px; padding:14px 23px; display:inline-flex; align-items:center; justify-content:center; gap:15px; border-radius:10px; font-size:14px; font-weight:700; transition:transform .2s,box-shadow .2s; } .button:hover { transform:translateY(-2px); } .button-primary,.button-light { color:white; background:var(--gradient); box-shadow:0 4px 20px #1357ff20; } .button-outline { border:1px solid #344155; background:transparent; } a:focus-visible { outline:3px solid var(--cyan); outline-offset:5px; } h1 { font-size:clamp(40px,3.6vw,54px); letter-spacing:-2.2px; line-height:1.13; margin-bottom:23px; } em { color:#5572ff; font-style:normal; } .eyebrow { color:var(--cyan); font-size:12px; font-weight:700; letter-spacing:1.8px; margin-bottom:22px; } .hero { display:grid; grid-template-columns:.85fr 1.4fr; gap:36px; padding-top:30px; padding-bottom:40px; align-items:center; min-height:590px; } .hero-text { font-size:17px; line-height:1.65; color:#bdc5d5; max-width:470px; margin-bottom:26px; } .hero-actions { display:flex; gap:12px; flex-wrap:wrap; } .quick-benefits { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:48px; } .quick-benefits svg { width:31px; height:31px; color:var(--cyan); margin-bottom:14px; } .quick-benefits div:nth-child(n+3) svg { color:#8b5aff; } .quick-benefits span { display:block; max-width:100px; color:#c4cddd; font-size:12px; line-height:1.6; }
.dashboard { display:flex; min-width:0; background:linear-gradient(125deg,#0b111b,#070d15); border:1px solid var(--line); border-radius:16px; overflow:hidden; box-shadow:0 20px 90px #0005; } .dashboard-sidebar { width:104px; flex-shrink:0; border-right:1px solid #192230; padding:14px 8px; } .dashboard-sidebar > .brand-symbol { transform:scale(.65); transform-origin:left top; margin-bottom:0; height:48px; } .dashboard-sidebar > div { display:flex; gap:7px; align-items:center; padding:11px 5px; font-size:9px; color:#bac4d3; border-radius:5px; } .dashboard-sidebar svg { width:13px; height:13px; } .dashboard-sidebar .active { background:#142e4d; color:#edf5ff; } .dashboard-main { flex:1; padding:16px 12px 10px; min-width:0; } .dashboard-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:19px; font-size:14px; } .dashboard-heading > span { font-size:8px; color:#a6b4c9; } .dashboard-heading b { display:inline-grid; place-items:center; margin-left:8px; width:24px; height:24px; background:#29374a; border-radius:50%; font-weight:400; } .stats { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:12px; } .stats > div { border:1px solid #1c2735; background:#0e1620; border-radius:8px; padding:13px 10px; } .stats span { font-size:8px; display:block; } .stats strong { display:block; font-size:23px; margin:7px 0; } .stats small { color:#91a1b8; font-size:7px; } .pipeline-panel,.source-panel,.activity-panel { background:#0e1620; border:1px solid #1c2735; border-radius:8px; padding:10px; } .dashboard h3 { font-size:10px; margin-bottom:12px; font-weight:500; } .pipeline-columns { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:5px; } .pipeline-column { min-width:0; padding:7px 5px; border:1px solid #263141; border-radius:6px; } .pipeline-column h4 { font-size:7px; font-weight:500; margin:0 0 6px; white-space:nowrap; } .pipeline-column > span { font-size:9px; } .deal { margin-top:9px; padding:9px 5px; border:1px solid #1d2a39; background:#141e2a; border-radius:5px; font-size:7px; line-height:1.6; } .deal small { display:block; font-size:6px; color:#a4b1c4; } .deal span { display:block; margin-top:4px; } .dashboard-bottom { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:12px; } .source-content { display:flex; align-items:center; gap:12px; } .donut { width:72px; height:72px; flex-shrink:0; background:conic-gradient(#068cff 0 35%,#37bfeb 35% 60%,#8367ed 60% 80%,#4b8bc0 80%); border-radius:50%; position:relative; } .donut:after { content:''; position:absolute; inset:15px; background:#0e1620; border-radius:50%; } .source-content ul { flex:1; list-style:none; margin:0; padding:0; } .source-content li { display:flex; justify-content:space-between; font-size:7px; gap:10px; margin:10px 0; } .source-content b { font-weight:400; } .activity-panel p { display:flex; align-items:center; gap:5px; font-size:7px; margin-bottom:10px; } .activity-panel small { margin-left:auto; font-size:6px; color:#acb7ca; white-space:nowrap; } .activity-panel i { width:12px; height:12px; border-radius:50%; background:#203b5d; flex-shrink:0; } .demo-caption { text-align:right; color:#8f9cb2; font-size:8px; margin:12px 0 0; }
.features-section { background:#f6f7fb; color:#0c1427; padding:38px 0 30px; } .section-intro { text-align:center; margin-bottom:24px; } .section-intro .eyebrow { color:#255bff; margin-bottom:12px; } .section-intro h2 { font-size:27px; letter-spacing:-.8px; margin-bottom:12px; } .section-note { color:#5c667b; font-size:12px; } .feature-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:17px; } .feature-card { display:flex; flex-direction:column; align-items:center; text-align:center; background:#fff; border:1px solid #e3e7f0; border-radius:18px; padding:24px 17px 20px; box-shadow:0 5px 18px #15295503; } .feature-icon { width:58px; height:58px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(135deg,#e5efff,#f2eaff); color:#5540f4; margin-bottom:18px; } .feature-icon svg { width:29px; height:29px; } .feature-card h3 { font-size:14px; margin-bottom:12px; } .feature-card p { font-size:12px; line-height:1.75; color:#414c60; margin-bottom:20px; } .feature-rule { width:48px; height:2px; background:var(--gradient); margin-top:auto; } .brand-banner { display:flex; align-items:center; justify-content:space-between; gap:25px; background:#eceef5; border-radius:16px; padding:20px 30px; margin-top:22px; } .brand-banner h2 { font-size:17px; letter-spacing:1.5px; margin-bottom:6px; } .brand-banner h2 > span { color:#0869ff; } .brand-banner h2 em { color:#6b3cf6; } .brand-banner p { font-size:11px; color:#596579; margin:0; } .brand-banner .brand-symbol { border-radius:9px; background-color:#03070e; } .brand-banner .button { flex-shrink:0; } .site-footer { display:flex; justify-content:space-between; gap:20px; padding:26px 0; font-size:11px; color:#acb7cb; }
@media(max-width:1100px) { .hero { grid-template-columns:1fr; gap:34px; padding:50px 0; } .hero-copy { max-width:680px; } h1 { font-size:58px; } .quick-benefits { max-width:520px; margin-top:30px; } .dashboard { max-width:900px; width:100%; } .dashboard-main { padding:20px; } .dashboard-sidebar { width:130px; } .dashboard-sidebar > div { font-size:11px; } .deal { font-size:9px; } .deal small { font-size:8px; } .pipeline-column h4 { font-size:9px; } .feature-grid { grid-template-columns:repeat(3,1fr); } .brand-banner h2 { font-size:14px; } }
@media(max-width:700px) { .page-shell,.site-header { width:calc(100% - 36px); } .site-header { flex-wrap:wrap; gap:16px; padding:18px 0; } .brand-name { font-size:17px; } .header-cta { min-height:42px; padding:12px 15px; font-size:12px; } nav { order:3; width:100%; justify-content:space-between; gap:12px; font-size:12px; padding-top:8px; } h1 { font-size:clamp(35px,8.6vw,54px); letter-spacing:-1.5px; } .hero { padding-top:40px; } .hero-text { font-size:16px; } .quick-benefits { gap:14px; } .quick-benefits span { font-size:10px; } .dashboard-sidebar { display:none; } .dashboard-main { padding:14px 10px; } .stats { gap:5px; } .stats > div { padding:10px 5px; } .stats span { font-size:7px; } .stats strong { font-size:20px; } .pipeline-columns { overflow-x:auto; grid-template-columns:repeat(5,100px); padding-bottom:8px; } .dashboard-bottom { grid-template-columns:1fr; } .source-content { max-width:300px; } .source-content li,.activity-panel p { font-size:10px; } .activity-panel small { font-size:8px; } .feature-grid { grid-template-columns:1fr; } .feature-card { padding:25px; } .feature-card p { max-width:320px; font-size:14px; } .feature-card h3 { font-size:17px; } .brand-banner { flex-wrap:wrap; padding:24px; } .brand-banner > div { flex:1; } .brand-banner h2 { line-height:1.8; } .brand-banner .button { width:100%; } .site-footer { flex-wrap:wrap; line-height:1.6; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .button { transition:none; } .button:hover { transform:none; } }