@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root { --bg:#f5f5f2; --surface:#fff; --text:#151515; --muted:#676762; --line:#deded8; --accent:#007DCC; --accent-dark:#0069AB; --shadow:0 22px 60px rgba(36,34,27,.1); }
@media (prefers-color-scheme:dark) { :root { --bg:#10110f; --surface:#181916; --text:#f4f2ed; --muted:#aaa9a1; --line:#32332e; --accent:#007DCC; --accent-dark:#0069AB; --shadow:0 28px 65px rgba(0,0,0,.28); } }
:root[data-theme="dark"] { --bg:#10110f; --surface:#181916; --text:#f4f2ed; --muted:#aaa9a1; --line:#32332e; --accent:#007DCC; --accent-dark:#0069AB; --shadow:0 28px 65px rgba(0,0,0,.28); }
:root[data-theme="light"] { --bg:#f5f5f2; --surface:#fff; --text:#151515; --muted:#676762; --line:#deded8; --accent:#007DCC; --accent-dark:#0069AB; --shadow:0 22px 60px rgba(36,34,27,.1); }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--bg); color:var(--text); font-family:Inter,Arial,sans-serif; font-size:15px; line-height:1.5; transition:background .25s,color .25s; } a { color:inherit; text-decoration:none; }
.section-wide,.section { max-width:1320px; margin:auto; padding-left:40px; padding-right:40px; }.section { padding-top:130px; padding-bottom:130px; }.header { height:80px; max-width:1400px; padding:0 40px; margin:auto; display:flex; align-items:center; justify-content:space-between; position:relative; z-index:2; }.brand { font-size:25px; font-weight:800; letter-spacing:-1.5px; }.brand span { color:var(--accent); } nav { display:flex; gap:32px; font-size:13px; font-weight:600; } nav a,.header-cta { transition:color .2s; } nav a { color:var(--muted); } nav a:hover,.header-cta:hover { color:var(--accent); }.header-cta { font-size:13px; font-weight:700; }
.eyebrow,.section-label { color:var(--muted); font-size:11px; font-weight:800; letter-spacing:1.6px; text-transform:uppercase; }.eyebrow span { width:7px; height:7px; display:inline-block; margin-right:9px; border-radius:50%; background:var(--accent); vertical-align:1px; }.hero { min-height:760px; display:grid; grid-template-columns:1.02fr .98fr; gap:50px; align-items:center; padding-top:80px; padding-bottom:85px; }.hero h1 { margin:26px 0 28px; font-size:clamp(46px,5.3vw,76px); font-weight:700; letter-spacing:-4.5px; line-height:.97; }.hero h1 em,h2 em,.hero h1 i { font-family:Inter,Arial,sans-serif; font-style:normal; color:var(--accent); font-weight:500; }.hero h1 i { letter-spacing:-2.6px; font-size:.68em; line-height:1.12; }.hero-text { max-width:545px; margin-bottom:30px; color:var(--muted); font-size:16px; line-height:1.65; }.button { display:inline-flex; align-items:center; justify-content:center; padding:16px 23px; border:0; border-radius:100px; font-size:14px; font-weight:800; transition:transform .2s,background .2s; }.button:hover { transform:translateY(-3px); }.button-primary { background:var(--accent); color:#fff; }.button-primary:hover { background:var(--accent-dark); }.button span,.header-cta span { margin-left:8px; font-size:18px; }.microcopy { max-width:390px; margin-top:16px; color:var(--muted); font-size:12px; line-height:1.55; }
.hero-visual { height:560px; position:relative; isolation:isolate; }.orb { position:absolute; z-index:-1; border-radius:50%; filter:blur(1px); }.orb-one { width:350px; height:350px; top:34px; right:45px; background:var(--accent); opacity:.22; }.orb-two { width:180px; height:180px; bottom:12px; left:40px; background:#82c9e6; opacity:.28; }.portrait { position:absolute; width:235px; height:350px; top:60px; left:42px; overflow:hidden; border-radius:125px 125px 10px 10px; background:#ddd; box-shadow:var(--shadow); }.portrait img { width:100%; height:100%; object-fit:cover; object-position:50% 42%; }.portrait-label { position:absolute; bottom:0; width:100%; padding:17px 18px; display:flex; flex-direction:column; color:#fff; font-size:10px; background:linear-gradient(transparent,rgba(0,0,0,.75)); }.portrait-label b { font-size:13px; }.phone { position:absolute; top:0; right:20px; width:270px; height:500px; overflow:hidden; padding:17px 15px; border:7px solid #222420; border-radius:38px; background:#f7f6f0; color:#1d211b; box-shadow:0 28px 45px rgba(0,0,0,.2); }.phone:before { content:''; position:absolute; top:0; left:50%; width:90px; height:18px; border-radius:0 0 12px 12px; background:#222420; transform:translateX(-50%); }.phone-top,.chart-head { display:flex; align-items:center; justify-content:space-between; }.phone-top { margin-top:5px; font-size:10px; }.phone-top span { width:6px; height:6px; border-radius:50%; background:#b2eb32; }.phone-top small { font-size:9px; }.phone-hello { margin:32px 0 22px; }.phone-hello small,.phone-task small { display:block; color:#777d73; font-size:9px; }.phone-hello strong { display:block; margin-top:7px; font-size:25px; line-height:1.08; }.chart { padding:14px; border-radius:16px; color:#77a70d; background:#e9eee2; }.chart-head { margin-bottom:8px; color:#4d5545; font-size:10px; }.chart-head b { color:#222; }.chart svg { width:100%; height:60px; }.phone-task { display:flex; align-items:center; gap:10px; margin-top:13px; padding:12px; border:1px solid #d8ddd2; border-radius:14px; }.task-icon { width:28px; height:28px; display:grid; place-items:center; border-radius:9px; color:#fff; background:#fa6144; }.phone-task p { flex:1; margin:0; }.phone-task b { display:block; font-size:10px; }.phone-nav { position:absolute; bottom:14px; right:18px; left:18px; display:flex; justify-content:space-around; color:#899087; font-size:18px; }.phone-nav .active { color:#151515; }.floating-note { position:absolute; right:230px; bottom:23px; display:flex; align-items:center; gap:11px; padding:12px; border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow); }.floating-note span { color:var(--accent); font-size:11px; font-weight:800; }.floating-note p { margin:0; font-size:10px; font-weight:700; line-height:1.35; }
.about { display:grid; grid-template-columns:25% 1fr; padding-top:38px; padding-bottom:145px; border-top:1px solid var(--line); }.about-content { display:grid; grid-template-columns:1.1fr .9fr; gap:80px; }.about h2,.heading-row h2,.benefits h2,.process>h2,.final-cta h2 { margin:0; font-size:clamp(33px,4vw,56px); font-weight:700; letter-spacing:-3px; line-height:1.06; }.about-content p { margin:0 0 17px; color:var(--muted); font-size:15px; line-height:1.7; }.heading-row { display:grid; grid-template-columns:25% 1fr; margin-bottom:55px; }.services-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }.service-card { position:relative; min-height:290px; padding:28px; border:1px solid var(--line); background:var(--surface); transition:transform .25s,box-shadow .25s; }.service-card:hover { transform:translateY(-6px); box-shadow:var(--shadow); }.service-card>span { color:var(--muted); font-size:11px; }.service-symbol { margin:37px 0 21px; color:var(--accent); font-size:29px; }.service-card h3 { margin:0 0 12px; font-size:21px; letter-spacing:-1px; }.service-card p { max-width:460px; margin:0; color:var(--muted); font-size:13px; line-height:1.65; }.service-card i { position:absolute; top:28px; right:28px; font-size:20px; font-style:normal; }
.benefits { display:grid; grid-template-columns:42% 58%; gap:40px; padding-top:130px; padding-bottom:130px; }.benefits-sticky { position:sticky; top:28px; align-self:start; }.benefits-sticky h2 { margin-top:28px; }.benefits-list article { display:grid; grid-template-columns:45px 1fr 20px; gap:15px; margin-bottom:29px; padding-bottom:29px; border-bottom:1px solid var(--line); }.benefits-list span { color:var(--accent); font-size:11px; font-weight:800; }.benefits-list h3 { margin:0 0 8px; font-size:22px; letter-spacing:-1px; }.benefits-list p { max-width:470px; margin:0; color:var(--muted); font-size:14px; line-height:1.6; }.benefits-list i { font-size:20px; font-style:normal; }.cases { padding-top:130px; padding-bottom:130px; border-top:1px solid var(--line); }.case { display:grid; grid-template-columns:.8fr 1.2fr; gap:65px; align-items:center; padding:60px 0; border-top:1px solid var(--line); }.case-reverse { grid-template-columns:1.2fr .8fr; }.case-reverse .case-copy { order:2; }.case-number { margin:0 0 18px; color:var(--accent); font-size:11px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; }.case h3 { margin:0 0 30px; font-size:31px; letter-spacing:-1.8px; line-height:1.1; }.case dl { margin:0; }.case dl div { margin-bottom:19px; }.case dt { margin-bottom:5px; color:var(--muted); font-size:10px; font-weight:800; letter-spacing:1px; text-transform:uppercase; }.case dd { margin:0; color:var(--muted); font-size:13px; line-height:1.62; }.case-gallery { min-width:0; padding:15px; border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow); }.case-main { display:block; width:100%; aspect-ratio:1.63; border:1px solid var(--line); object-fit:cover; object-position:top; transition:opacity .15s; }.thumbs { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:10px; }.thumbs button { padding:0; border:1px solid transparent; background:none; cursor:pointer; opacity:.55; transition:opacity .2s,border-color .2s; }.thumbs button.active,.thumbs button:hover { border-color:var(--accent); opacity:1; }.thumbs img { display:block; width:100%; height:48px; object-fit:cover; object-position:top; }
.process { padding-top:120px; padding-bottom:130px; }.process>h2 { margin:27px 0 55px; }.steps { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); }.steps article { min-height:210px; margin-right:23px; padding:22px 25px 10px 0; border-right:1px solid var(--line); }.steps article:last-child { border:0; }.steps span { color:var(--accent); font-size:11px; font-weight:800; }.steps h3 { margin:40px 0 12px; font-size:18px; letter-spacing:-.7px; line-height:1.2; }.steps p { margin:0; color:var(--muted); font-size:12px; line-height:1.65; }.final-cta { padding-bottom:120px; }.final-grid { min-height:480px; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto 1fr auto; column-gap:45px; padding:65px; color:var(--bg); background:var(--text); }.final-grid h2 { grid-column:1/-1; margin:0 0 31px; }.final-grid h2 em { color:var(--accent); }.final-grid>p { max-width:430px; margin:0; color:color-mix(in srgb,var(--bg) 75%,transparent); font-size:14px; line-height:1.65; }.final-grid .button { align-self:end; justify-self:start; }.final-grid small { grid-column:1/-1; margin-top:30px; color:color-mix(in srgb,var(--bg) 60%,transparent); font-size:11px; } :root[data-theme="dark"] .final-grid { background:#181916; color:#fff; } :root[data-theme="dark"] .final-grid>p { color:rgba(255,255,255,.72); } :root[data-theme="dark"] .final-grid small { color:rgba(255,255,255,.58); } @media (prefers-color-scheme:dark) { :root:not([data-theme="light"]) .final-grid { background:#181916; color:#fff; } :root:not([data-theme="light"]) .final-grid>p { color:rgba(255,255,255,.72); } :root:not([data-theme="light"]) .final-grid small { color:rgba(255,255,255,.58); } }
footer { max-width:1320px; display:flex; align-items:center; gap:28px; margin:auto; padding:25px 40px 37px; border-top:1px solid var(--line); color:var(--muted); font-size:11px; } footer p:last-child { margin-left:auto; }.theme-toggle { padding:0; border:0; color:var(--muted); background:transparent; font:inherit; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }.theme-toggle span { margin-left:4px; color:var(--accent); font-size:15px; }.reveal { opacity:0; transform:translateY(22px); transition:opacity .7s ease,transform .7s ease; }.reveal.is-visible { opacity:1; transform:none; }.task-icon { background:var(--accent); }
@media (max-width:800px) { .section-wide,.section,.header { padding-left:20px; padding-right:20px; }.header { height:68px; }.header nav { display:none; }.header-cta { font-size:11px; }.hero { display:block; min-height:0; padding-top:55px; padding-bottom:85px; }.hero h1 { font-size:47px; letter-spacing:-3.3px; }.hero h1 i { font-size:.63em; }.hero-text { font-size:14px; }.hero-visual { height:440px; margin-top:55px; }.portrait { top:65px; left:0; width:162px; height:255px; }.phone { right:0; width:215px; height:400px; padding:14px 11px; border-radius:30px; }.phone-hello { margin:26px 0 18px; }.phone-hello strong { font-size:20px; }.chart { padding:11px; }.chart svg { height:49px; }.phone-task { margin-top:10px; padding:9px; }.floating-note { right:138px; bottom:0; }.about { display:block; padding-top:25px; padding-bottom:85px; }.about-content,.heading-row { display:block; }.about-content h2,.heading-row h2 { margin:24px 0 27px; }.section { padding-top:85px; padding-bottom:85px; }.services-grid { grid-template-columns:1fr; }.service-card { min-height:250px; }.benefits { display:block; padding-top:85px; padding-bottom:85px; }.benefits-sticky { position:static; }.benefits-list { margin-top:45px; }.benefits-list article { grid-template-columns:33px 1fr 16px; }.benefits-list h3 { font-size:19px; }.cases { padding-top:85px; padding-bottom:50px; }.case,.case-reverse { display:flex; flex-direction:column; gap:34px; padding:45px 0; }.case-reverse .case-copy { order:0; }.case h3 { font-size:27px; }.case-gallery { width:100%; }.thumbs img { height:40px; }.process { padding-top:85px; padding-bottom:85px; }.steps { grid-template-columns:1fr 1fr; }.steps article { min-height:195px; margin-right:0; padding:22px 15px; border-bottom:1px solid var(--line); }.steps article:nth-child(2) { border-right:0; }.steps article:nth-child(3) { border-bottom:0; }.steps h3 { margin-top:31px; font-size:16px; }.final-cta { padding:20px 20px 80px; }.final-grid { display:block; min-height:0; padding:35px 25px; }.final-grid h2 { margin:0 0 23px; font-size:35px; letter-spacing:-2.4px; }.final-grid .button { margin-top:26px; font-size:12px; }.final-grid small { display:block; margin-top:22px; } footer { display:grid; grid-template-columns:auto 1fr; gap:12px; padding:25px 20px; } footer p { margin:0; } footer p:last-child { grid-column:1/-1; margin:0; }.theme-toggle { justify-self:end; }.reveal { transform:translateY(14px); } }