* { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { background: #FBFBF9; color: #16181D; font-family: 'Instrument Sans', system-ui, sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; } a { color: #2563EB; text-decoration: none; } a:hover { color: #1D4ED8; } ::selection { background: rgba(37,99,235,0.16); } h1, h2, h3 { font-family: 'Archivo', system-ui, sans-serif; } .page { position: relative; width: 100%; background: #FBFBF9; } .container { max-width: 1200px; margin: 0 auto; padding: 0 44px; } .blue { color: #2563EB; } .lightblue { color: #7FA8FF; } /* ---------- Reveal animations ---------- Content is visible by default; the hidden "pre-reveal" state only applies once JS has tagged with .js, so content never depends on scripts or animation callbacks to appear. */ .wipe { display: inline-block; } .tick { width: 52px; height: 2px; background: #2563EB; transform-origin: left; } html.js [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1); } html.js [data-reveal].shown { opacity: 1; transform: none; } html.js .wipe { opacity: 1; transform: translateY(112%); transition: transform .95s cubic-bezier(.19,1,.22,1); } html.js .wipe.shown { transform: none; } html.js .tick { opacity: 1; transform: scaleX(0); transition: transform .8s cubic-bezier(.19,1,.22,1); } html.js .tick.shown { transform: scaleX(1); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } html.js [data-reveal], html.js .wipe, html.js .tick { opacity: 1; transform: none; transition: none; } .marquee-track { animation: none !important; } } /* ---------- Progress bar & nav ---------- */ .progress { position: fixed; top: 0; left: 0; height: 2px; width: 0%; background: #2563EB; z-index: 80; } .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 70; border-bottom: 1px solid transparent; transition: background .35s ease, backdrop-filter .35s ease, border-color .35s ease, box-shadow .35s ease; } .nav.scrolled { background: rgba(251,251,249,0.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom-color: #E7E7E1; box-shadow: 0 1px 24px -14px rgba(20,24,34,0.4); } .nav-inner { display: flex; align-items: center; justify-content: space-between; padding-top: 16px; padding-bottom: 16px; } .nav-logo img { height: 26px; width: auto; display: block; } .nav-right { display: flex; align-items: center; gap: 36px; } .nav-links { display: flex; gap: 30px; align-items: center; } .nav-links a { font-size: 14.5px; font-weight: 500; color: #565C66; transition: color .2s; } .nav-links a:hover, .nav-links a.active { color: #2563EB; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 10px; border-radius: 11px; font-weight: 500; transition: background .2s, color .2s, border-color .2s; } .btn-ink { background: #16181D; color: #fff; } .btn-ink:hover { background: #2A2E36; color: #fff; } .btn-nav { padding: 9px 18px; border-radius: 9px; font-size: 14px; } .btn-lg { padding: 15px 28px; font-size: 15px; } .btn-outline { border: 1px solid #16181D; color: #16181D; background: transparent; } .btn-outline:hover { background: #16181D; color: #fff; } .btn-white { padding: 16px 30px; background: #fff; color: #14161B; font-size: 16px; font-weight: 600; } .btn-white:hover { background: #E7E7E1; color: #14161B; } .btn-ghost { padding: 16px 30px; background: transparent; border: 1px solid rgba(255,255,255,0.22); color: #fff; font-size: 16px; } .btn-ghost:hover { border-color: rgba(255,255,255,0.5); background: rgba(255,255,255,0.05); color: #fff; } .link-cta { display: inline-flex; align-items: center; gap: 8px; padding: 15px 20px; color: #16181D; font-size: 15px; font-weight: 500; } .link-cta:hover { color: #16181D; } /* ---------- Eyebrow ---------- */ .eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 2.6px; text-transform: uppercase; color: #2563EB; } .eyebrow.light { color: #7FA8FF; } .eyebrow-row { display: flex; align-items: center; gap: 16px; margin-bottom: 26px; } /* ---------- Hero ---------- */ .hero { position: relative; z-index: 1; min-height: 94vh; display: flex; align-items: center; padding: 150px 0 90px; border-bottom: 1px solid #EAEAE4; } .hero-grid { width: 100%; display: grid; grid-template-columns: 1.5fr 1fr; gap: 72px; align-items: center; } .hero-h1 { font-size: clamp(44px, 6.6vw, 84px); font-weight: 700; line-height: 1.02; letter-spacing: -0.038em; color: #16181D; } .mask { display: block; overflow: hidden; padding-bottom: 0.05em; } .hero-sub { margin-top: 30px; max-width: 52ch; font-size: 19px; line-height: 1.65; color: #565C66; } .hero-ctas { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .company-card { border: 1px solid #E7E7E1; border-radius: 18px; background: #fff; padding: 8px 30px; box-shadow: 0 30px 60px -40px rgba(20,24,34,0.25); } .card-row { display: flex; align-items: center; justify-content: space-between; padding: 22px 0; border-bottom: 1px solid #EEEEE8; } .card-row.last { border-bottom: none; } .card-label { font-size: 13px; color: #8A909A; } .card-value { font-family: 'Archivo', system-ui, sans-serif; font-weight: 600; font-size: 16px; } /* ---------- Marquee ---------- */ .marquee { position: relative; z-index: 1; overflow: hidden; border-bottom: 1px solid #EAEAE4; padding: 17px 0; background: #fff; } .marquee-track { display: flex; width: max-content; animation: rc-marquee 46s linear infinite; } .marquee-group { display: flex; align-items: center; } .marquee-group span { font-size: 13px; font-weight: 600; letter-spacing: 2px; color: #A0A6AE; padding: 0 20px; } .marquee-group i { color: #D2D5DA; font-style: normal; } @keyframes rc-marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ---------- Stats ---------- */ .stats { position: relative; z-index: 1; padding: 80px 0; border-bottom: 1px solid #EAEAE4; } .stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .stat-num { font-family: 'Archivo', system-ui, sans-serif; font-size: clamp(38px, 4.4vw, 56px); font-weight: 700; letter-spacing: -0.03em; } .stat-cap { margin-top: 10px; font-size: 13px; font-weight: 600; letter-spacing: 1.4px; text-transform: uppercase; color: #8A909A; } /* ---------- Sections shared ---------- */ .section-h2 { margin-top: 16px; font-size: clamp(30px, 3.8vw, 48px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.08; } .section-h2.big { font-size: clamp(32px, 4.2vw, 52px); line-height: 1.06; } .section-intro { margin-top: 16px; max-width: 54ch; font-size: 17px; line-height: 1.6; color: #565C66; } section { scroll-margin-top: 76px; } /* ---------- Products ---------- */ .products { position: relative; z-index: 1; padding: 100px 0 110px; } .featured-card { margin-top: 44px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; padding: 40px; background: #fff; border: 1px solid #E7E7E1; border-radius: 20px; color: inherit; box-shadow: 0 30px 60px -46px rgba(20,24,34,0.22); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s; } .featured-card:hover { border-color: #16181D; box-shadow: 0 34px 66px -40px rgba(20,24,34,0.34); color: inherit; } .featured-main { max-width: 560px; } .featured-head { display: flex; align-items: center; gap: 16px; } .featured-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .featured-title-row h3 { font-size: 25px; font-weight: 700; letter-spacing: -0.01em; } .featured-cat { margin-top: 5px; font-size: 13.5px; font-weight: 500; letter-spacing: 0.3px; text-transform: uppercase; color: #8A909A; } .featured-desc { margin-top: 20px; font-size: 17px; line-height: 1.65; color: #565C66; } .featured-meta { min-width: 190px; display: flex; flex-direction: column; gap: 18px; align-items: flex-end; } .featured-meta > div { text-align: right; } .meta-label { font-size: 11.5px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: #8A909A; } .meta-value { margin-top: 5px; font-family: 'Archivo', system-ui, sans-serif; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; } .meta-value.green { color: #15803D; } .tile { width: 46px; height: 46px; border-radius: 11px; background: #F4F4F0; border: 1px solid #E4E4DE; display: flex; align-items: center; justify-content: center; font-family: 'Archivo', system-ui, sans-serif; font-size: 19px; font-weight: 700; color: #16181D; flex: none; } .tile-lg { width: 56px; height: 56px; border-radius: 14px; font-size: 23px; } .tile-vr { width: 42px; height: 42px; background: #16181D; border: none; font-size: 14px; color: #fff; } .pill { padding: 4px 11px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; } .pill-green { color: #15803D; background: rgba(21,128,61,0.09); border: 1px solid rgba(21,128,61,0.2); } .pill-sm { padding: 4px 10px; font-size: 10.5px; } .product-grid { margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 24px; } .product-card { display: flex; flex-direction: column; gap: 16px; padding: 26px; background: #fff; border: 1px solid #E7E7E1; border-radius: 15px; color: inherit; min-height: 232px; box-shadow: 0 20px 44px -40px rgba(20,24,34,0.2); transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .3s, border-color .3s; } .product-card.shown:hover { border-color: #16181D; transform: translateY(-5px); box-shadow: 0 26px 54px -30px rgba(20,24,34,0.3); color: inherit; } .pc-top { display: flex; align-items: center; justify-content: space-between; } .pc-title-row { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .pc-title-row h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; } .pc-cat { font-size: 12px; font-weight: 500; letter-spacing: 0.4px; text-transform: uppercase; color: #A0A6AE; } .pc-desc { margin-top: 10px; font-size: 15px; line-height: 1.6; color: #565C66; } .pc-bottom { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; } .pc-tags { display: flex; gap: 7px; flex-wrap: wrap; } .pc-tags span { font-size: 11.5px; font-weight: 500; color: #8A909A; border: 1px solid #E7E7E1; border-radius: 6px; padding: 3px 9px; } .pc-link { font-size: 12.5px; font-weight: 600; color: #2563EB; white-space: nowrap; } .portfolio-cta { margin-top: 44px; display: flex; justify-content: center; } /* ---------- About ---------- */ .about { position: relative; z-index: 1; padding: 104px 0; background: #F4F4F0; border-top: 1px solid #EAEAE4; border-bottom: 1px solid #EAEAE4; } .about-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 68px; align-items: start; } .about-p { margin-top: 18px; font-size: 18px; line-height: 1.7; color: #565C66; } .about-p.strong { margin-top: 24px; color: #3E434B; } .quote-card { position: relative; padding: 34px; background: #fff; border: 1px solid #E7E7E1; border-radius: 18px; box-shadow: 0 30px 60px -46px rgba(20,24,34,0.22); } .quote-glyph { font-family: 'Archivo', system-ui, sans-serif; font-size: 56px; line-height: 0.5; color: #2563EB; height: 30px; } .quote-text { font-family: 'Archivo', system-ui, sans-serif; font-size: 23px; font-weight: 600; line-height: 1.4; letter-spacing: -0.01em; color: #16181D; } .quote-attr { margin-top: 24px; display: flex; align-items: center; gap: 13px; } .attr-name { font-size: 15px; font-weight: 600; } .attr-role { font-size: 13px; color: #8A909A; } /* ---------- Approach ---------- */ .approach { position: relative; z-index: 1; padding: 104px 0; } .approach-head { max-width: 52ch; } .principles { margin-top: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 0; border-top: 1px solid #E7E7E1; } .principle { padding: 36px 34px; border-right: 1px solid #E7E7E1; } .principle:first-child { padding-left: 0; } .principle:last-child { padding-right: 0; border-right: none; } .p-num { font-family: 'Archivo', system-ui, sans-serif; font-size: 15px; font-weight: 700; color: #2563EB; } .principle h3 { margin-top: 20px; font-size: 22px; font-weight: 700; letter-spacing: -0.01em; } .principle p { margin-top: 12px; font-size: 15.5px; line-height: 1.65; color: #565C66; } /* ---------- Contact ---------- */ .contact { position: relative; z-index: 1; background: #14161B; color: #F4F4F0; padding: 120px 0; scroll-margin-top: 0; } .contact-h2 { margin-top: 18px; font-size: clamp(40px, 6vw, 76px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.0; color: #fff; max-width: 16ch; } .contact-p { margin-top: 22px; font-size: 19px; line-height: 1.6; color: #A6ACB6; max-width: 46ch; } .contact-ctas { margin-top: 38px; display: flex; flex-wrap: wrap; gap: 14px; } /* ---------- Footer ---------- */ .footer { position: relative; z-index: 1; background: #FBFBF9; padding: 44px 0; } .footer-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; } .footer-brand { display: flex; align-items: center; gap: 14px; } .footer-brand img { height: 22px; width: auto; display: block; } .footer-div { height: 26px; width: 1px; background: #E0E0DA; } .footer-tag { font-size: 12px; color: #8A909A; } .footer-links { display: flex; align-items: center; gap: 26px; font-size: 13.5px; font-weight: 500; } .footer-links a { color: #565C66; } .footer-links a:hover { color: #2563EB; } .footer-copy { margin-top: 22px; font-size: 12px; color: #A0A6AE; } /* ---------- Responsive ---------- */ @media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; gap: 44px; } .hero { min-height: 0; padding: 130px 0 70px; } .about-grid { grid-template-columns: 1fr; gap: 40px; } .principle, .principle:first-child, .principle:last-child { padding: 32px 0; border-right: none; border-bottom: 1px solid #E7E7E1; } .principles > .principle:last-child { border-bottom: none; } .featured-meta { flex-direction: row; gap: 32px; align-items: flex-start; min-width: 0; } .featured-meta > div { text-align: left; } } @media (max-width: 720px) { .container { padding-left: 24px; padding-right: 24px; } .nav-links { display: none; } .stats-grid { grid-template-columns: 1fr; gap: 36px; } .products { padding: 72px 0 80px; } .about, .approach { padding: 72px 0; } .contact { padding: 84px 0; } .featured-card { padding: 28px; } }