@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root { --ink:#101b35; --muted:#667085; --paper:#f7f6f1; --lime:#c8f169; --line:#d9ddd7; --orange:#ff7456; }
* { box-sizing:border-box; }
html { font-size:16px; scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:'DM Sans',sans-serif; line-height:1.6; }
h1,h2,h3,.brand-mark { font-family:'Space Grotesk',sans-serif; letter-spacing:-.04em; }
h1,h2,h3,p { margin-top:0; } h1 { font-size:clamp(3.4rem,7vw,7.5rem); line-height:.96; font-weight:500; } h2 { font-size:clamp(2.5rem,5vw,5rem); line-height:1; font-weight:500; } h3 { font-size:1.5rem; }
em { color:var(--orange); font-style:normal; } a { color:inherit; text-decoration:none; }
.container { max-width:1180px; padding:0 28px; margin:0 auto; }
.site-header { background:var(--ink); padding:20px 0; } .navbar { padding:0; } .brand-mark { display:grid; grid-template-columns:42px auto; grid-template-rows:auto auto; column-gap:10px; color:white; line-height:.9; font-size:1.7rem; font-weight:700; letter-spacing:-.08em; align-items:center; } .brand-mark small { grid-column:2; color:var(--lime); font:500 .47rem 'DM Sans',sans-serif; letter-spacing:.08em; margin-top:7px; } .brand-logo { grid-row:1 / span 2; width:42px; height:42px; object-fit:contain; }
.navbar-toggler { border-color:#ffffff66; } .nav-link { color:#e8ecf5; font-size:.9rem; } .nav-link:hover { color:var(--lime); } .nav-cta { background:var(--lime); color:var(--ink); border-radius:30px; padding:11px 18px!important; font-weight:600; }
.hero { background:var(--ink); color:white; min-height:680px; display:flex; align-items:center; overflow:hidden; } .hero-grid { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:50px; width:100%; } .eyebrow { color:#aab3c5; font-size:.76rem; font-weight:700; letter-spacing:.16em; margin-bottom:28px; } .eyebrow span { color:var(--lime); margin:0 8px; } .hero h1 { max-width:720px; margin-bottom:28px; } .lede { color:#b9c1d1; font-size:1.18rem; max-width:560px; } .hero-actions { display:flex; align-items:center; gap:28px; margin-top:40px; }
.btn { border:0; border-radius:3px; padding:15px 22px; font-weight:700; display:inline-flex; gap:22px; align-items:center; } .btn-primary { background:var(--lime); color:var(--ink); } .btn-light { background:white; color:var(--ink); } .text-link { font-weight:600; border-bottom:1px solid currentColor; padding-bottom:4px; } .text-link span { margin-left:14px; color:var(--orange); }
.hero-visual { height:480px; position:relative; } .orb { position:absolute; border-radius:50%; } .orb-one { width:280px; height:280px; background:var(--lime); top:100px; left:80px; } .orb-two { width:150px; height:150px; background:var(--orange); top:30px; right:70px; } .orbit { position:absolute; border:1px solid #ffffff66; border-radius:50%; transform:rotate(-25deg); } .orbit-one { width:440px; height:180px; top:150px; left:0; } .orbit-two { width:190px; height:500px; top:0; left:190px; transform:rotate(35deg); } .visual-label { position:absolute; bottom:35px; left:120px; font-size:.9rem; line-height:1.3; } .visual-label strong { color:var(--orange); font-size:2rem; }
.intro-section, .about-content, .contact-content { padding:130px 0; } .split-section { display:grid; grid-template-columns:1fr 1fr; gap:90px; align-items:start; } .split-section h2 { margin-bottom:0; } .split-section h2 span { color:var(--muted); } .split-section > div:last-child { padding-top:18px; max-width:490px; } .split-section p { color:var(--muted); font-size:1.1rem; margin-bottom:25px; }.accent { color:var(--orange); }
.services-preview { background:#e9ebe3; padding:120px 0; } .section-heading { display:flex; justify-content:space-between; align-items:end; margin-bottom:55px; } .section-heading h2 { margin-bottom:0; } .cards { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .service-card { position:relative; min-height:310px; padding:30px; background:var(--paper); transition:transform .2s,background .2s; } .service-card:hover { background:var(--lime); transform:translateY(-7px); } .card-number { color:var(--orange); font-size:.8rem; font-weight:700; } .service-card h3 { margin-top:80px; } .service-card p { color:var(--muted); max-width:250px; } .card-arrow { position:absolute; right:30px; bottom:25px; font-size:1.5rem; }
.statement { background:var(--orange); color:var(--ink); padding:110px 0; } .statement .eyebrow { color:#743525; } blockquote { font:500 clamp(2.3rem,5vw,5rem)/1.05 'Space Grotesk',sans-serif; letter-spacing:-.05em; max-width:850px; margin:0 0 30px; } .statement-note { font-size:.9rem; font-weight:600; }
.projects-preview { padding:120px 0; background:white; }
.ai-chat-section { padding:110px 0; background:white; } .ai-chat { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; align-items:start; } .ai-chat h2 { margin-bottom:20px; } .ai-chat h2 span { color:var(--muted); } .ai-chat > div:first-child > p:last-child { color:var(--muted); max-width:350px; font-size:1.05rem; } .chat-panel { background:var(--ink); padding:22px; border-radius:4px; } .chat-messages { min-height:230px; max-height:360px; overflow-y:auto; display:flex; flex-direction:column; gap:12px; padding:5px 0 20px; } .chat-message { max-width:85%; padding:12px 15px; border-radius:3px; font-size:.92rem; white-space:pre-wrap; } .chat-message-ai { color:#e8ecf5; background:#26334f; align-self:flex-start; } .chat-message-user { color:var(--ink); background:var(--lime); align-self:flex-end; } .chat-input-row { display:flex; gap:10px; border-top:1px solid #ffffff22; padding-top:18px; } .chat-input-row input { min-width:0; flex:1; border:1px solid #ffffff44; background:transparent; color:white; padding:13px 14px; outline:none; } .chat-input-row input::placeholder { color:#aab3c5; } .chat-input-row input:focus { border-color:var(--lime); } .chat-input-row .btn { padding:12px 16px; } .chat-input-row button:disabled { opacity:.55; cursor:wait; } .chat-status { color:#ffb09f; min-height:20px; margin:10px 0 0; font-size:.8rem; }
.ai-chat-launcher { position:fixed; right:24px; bottom:24px; z-index:1000; display:flex; align-items:center; gap:10px; border:0; border-radius:30px; padding:13px 18px; background:var(--lime); color:var(--ink); font-weight:700; box-shadow:0 8px 24px #101b3544; cursor:pointer; } .ai-chat-launcher[hidden] { display:none; } .ai-chat-launcher-mark { font-size:1.3rem; } .ai-chat-overlay { position:fixed; inset:0; z-index:999; display:flex; justify-content:flex-end; align-items:flex-end; padding:16px; background:#101b3533; } .ai-chat-overlay[hidden] { display:none; } .ai-chat-window { width:min(380px,100%); max-height:min(500px,calc(100vh - 32px)); display:flex; flex-direction:column; overflow:hidden; background:var(--paper); box-shadow:0 16px 50px #101b3566; border-radius:5px; } .ai-chat-header { display:flex; justify-content:space-between; align-items:start; padding:14px 16px 10px; background:var(--ink); color:white; } .ai-chat-header .eyebrow { margin-bottom:2px; font-size:.65rem; } .ai-chat-header h2 { font-size:1.3rem; margin:0; } .ai-chat-close { border:0; background:transparent; color:white; font-size:1.4rem; line-height:1; cursor:pointer; padding:2px 4px; } .ai-chat-window .chat-messages { min-height:180px; max-height:none; flex:1; padding:14px; background:var(--paper); } .ai-chat-window .chat-message { padding:9px 11px; font-size:.84rem; } .ai-chat-window .chat-panel { border-radius:0; padding:10px 14px 6px; } .ai-chat-window .chat-input-row { padding-top:10px; } .ai-chat-window .chat-input-row input { padding:9px 10px; font-size:.9rem; } .ai-chat-window .chat-input-row .btn { padding:9px 12px; }
.page-hero { background:var(--ink); color:white; padding:130px 0 140px; } .page-hero h1 { margin-bottom:30px; } .page-hero .lede { max-width:550px; }.service-list { padding:80px 0; } .service-list article { display:grid; grid-template-columns:130px 1fr; gap:25px; padding:50px 0; border-bottom:1px solid var(--line); } .service-list article > span { color:var(--orange); font-weight:700; } .service-list h2 { font-size:clamp(2rem,4vw,3.5rem); margin-bottom:18px; } .service-list p { color:var(--muted); max-width:650px; font-size:1.1rem; }.dark-cta { padding:100px 0; background:var(--ink); color:white; }.dark-cta h2 { margin:0; }.about-content { background:white; }.values { padding:110px 0; background:#e9ebe3; }.value-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:35px; margin-top:55px; }.value-grid strong { font:500 2rem 'Space Grotesk',sans-serif; }.value-grid p { color:var(--muted); max-width:240px; margin-top:15px; }.contact-hero { padding-bottom:110px; }.contact-content { background:white; }.contact-details { padding-top:0!important; }.contact-details .btn { margin-top:15px; }
.project-list { padding:60px 0 100px; background:var(--paper); } .project-item { display:grid; grid-template-columns:230px 1fr; gap:45px; padding:58px 0; border-bottom:1px solid var(--line); } .project-meta { display:flex; flex-direction:column; gap:14px; color:var(--orange); font-size:.75rem; font-weight:700; letter-spacing:.1em; } .project-item h2 { font-size:clamp(2rem,4vw,3.8rem); margin-bottom:20px; } .project-item p { color:var(--muted); font-size:1.1rem; max-width:680px; } .project-featured { background:var(--ink); color:white; margin:0 -28px; padding:58px 28px; } .project-featured p { color:#c5cbd6; } .tag-list { display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; } .tag-list span { border:1px solid currentColor; border-radius:50px; padding:7px 13px; font-size:.78rem; color:var(--orange); } .technology-band { padding:110px 0; background:#e9ebe3; } .technology-band h2 { margin-bottom:60px; } .technology-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:35px; } .technology-grid strong { font:500 1.45rem 'Space Grotesk',sans-serif; } .technology-grid p { color:var(--muted); margin-top:15px; max-width:280px; }
.project-customers { margin:24px 0 0; color:var(--muted); font-size:.9rem; } .project-featured .project-customers { color:#c5cbd6; } .project-customers strong { color:var(--ink); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase; } .project-featured .project-customers strong { color:white; } .project-customers ul { display:flex; flex-wrap:wrap; gap:8px 18px; margin:8px 0 0; padding-left:18px; }
.customers-section { padding:100px 0 120px; background:var(--paper); } .customer-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:45px; } .customer-card { min-height:250px; padding:28px; background:white; border:1px solid var(--line); transition:transform .2s, background .2s; } .customer-card:hover { background:var(--lime); transform:translateY(-5px); } .customer-logo { width:170px; height:78px; display:grid; place-items:center; margin-bottom:45px; color:var(--lime); font:700 1.15rem 'Space Grotesk',sans-serif; letter-spacing:-.04em; } .customer-logo img { max-width:135px; max-height:52px; width:auto; height:auto; } .customer-card h2 { font-size:1.6rem; margin-bottom:10px; } .customer-card p { color:var(--muted); font-size:.95rem; max-width:260px; }
.products-section { padding:100px 0 120px; background:var(--paper); } .product-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:45px; } .product-card { overflow:hidden; background:white; border:1px solid var(--line); } .product-carousel { background:#eeeeee; } .product-carousel img { height:280px; padding:10px; object-fit:cover; object-position:top; } .product-content { padding:30px; } .product-content .eyebrow { margin-bottom:12px; } .product-content h2 { font-size:clamp(2rem,4vw,3rem); margin-bottom:15px; } .product-content > p:not(.eyebrow) { color:var(--muted); min-height:76px; } .product-content .tag-list { margin-top:25px; }
.site-footer { background:var(--ink); color:#c5cbd6; padding:55px 0 25px; }.footer-grid { display:grid; grid-template-columns:1fr 1fr; gap:40px; padding-bottom:50px; }.footer-grid .brand-mark { display:flex; flex-direction:row; align-items:baseline; gap:8px; white-space:nowrap; }.footer-grid .brand-mark small { margin-top:0; }.footer-grid p { max-width:250px; font-size:.9rem; margin-top:25px; }.footer-grid > div:last-child { display:flex; flex-direction:column; align-items:flex-end; gap:8px; }.footer-bottom { border-top:1px solid #ffffff22; display:flex; gap:25px; padding-top:22px; font-size:.78rem; }.footer-bottom span { margin-left:auto; }

@media (max-width:767px) { .container { padding:0 20px; } .hero { min-height:720px; padding:70px 0; }.hero-grid,.split-section,.ai-chat { grid-template-columns:1fr; gap:45px; }.hero-visual { height:260px; transform:scale(.75); transform-origin:left top; margin-bottom:-70px; }.hero-actions { flex-wrap:wrap; gap:20px; }.intro-section,.about-content,.contact-content,.services-preview,.projects-preview,.ai-chat-section,.customers-section,.products-section { padding:80px 0; }.section-heading { display:block; }.section-heading .text-link { display:inline-block; margin-top:30px; }.cards,.value-grid,.technology-grid,.customer-grid,.product-grid { grid-template-columns:1fr; }.service-card { min-height:260px; }.service-card h3 { margin-top:55px; }.page-hero { padding:90px 0; }.service-list article { grid-template-columns:45px 1fr; gap:10px; padding:35px 0; }.project-item { grid-template-columns:1fr; gap:20px; padding:40px 0; }.project-featured { margin:0 -20px; padding:40px 20px; }.product-carousel img { height:220px; }.chat-input-row { flex-direction:column; }.chat-input-row .btn { justify-content:center; }.dark-cta .split-section { gap:35px; }.footer-grid { grid-template-columns:1fr; }.footer-grid > div:last-child { align-items:flex-start; }.footer-bottom { flex-wrap:wrap; }.footer-bottom span { margin-left:0; width:100%; } }