:root{--bg:#111419;--panel:#191e25;--ink:#f7f9fb;--muted:#aeb7c4;--blue:#337dff;--line:#2c3440}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.5}a{color:inherit}.masthead{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center;padding:20px 40px;border-bottom:1px solid var(--line);background:rgba(17,20,25,.92);position:sticky;top:0;z-index:5;backdrop-filter:blur(12px)}.brand{text-decoration:none;font-weight:900}.masthead nav{display:flex;gap:20px}.masthead nav a,.call{text-decoration:none;color:var(--muted);font-size:14px}.call{justify-self:end;color:#fff;font-weight:800}.hero{display:grid;grid-template-columns:.82fr 1.18fr;gap:0;min-height:720px;border-bottom:1px solid var(--line)}.hero-text{padding:86px 44px;display:flex;flex-direction:column;justify-content:center}.label{margin:0 0 16px;color:var(--blue);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:900}.hero h1{margin:0;font-size:clamp(42px,5vw,76px);line-height:.98;letter-spacing:0}.hero p{max-width:620px;color:var(--muted);font-size:20px}.primary{width:max-content;min-height:48px;display:inline-flex;align-items:center;justify-content:center;padding:0 22px;margin-top:18px;background:var(--blue);color:#fff;text-decoration:none;font-weight:900}.hero img{width:100%;height:100%;min-height:720px;object-fit:cover}.capabilities,.workflow,.outputs,.contact{padding:82px 44px}.capabilities h2,.workflow h2,.outputs h2,.contact h2{margin:0;font-size:clamp(34px,4vw,60px);line-height:1;letter-spacing:0}.matrix{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);margin-top:30px;border:1px solid var(--line)}.matrix div{background:var(--panel);min-height:150px;padding:22px;display:flex;flex-direction:column;justify-content:space-between}.matrix b{color:var(--blue)}.matrix span{font-size:19px;font-weight:800}.workflow{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;background:#f4f7fb;color:#131820}.workflow p{color:#536070}.timeline{border-left:2px solid var(--blue)}.timeline article{padding:0 0 34px 28px;position:relative}.timeline article:before{content:"";position:absolute;left:-8px;top:6px;width:14px;height:14px;background:var(--blue)}.timeline span{font-weight:900;text-transform:uppercase;font-size:12px;letter-spacing:.12em;color:#131820}.outputs p,.contact p{color:var(--muted);max-width:680px;font-size:19px}.output-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:26px}.output-grid span{padding:18px;border:1px solid var(--line);background:var(--panel);font-weight:800}.contact{border-top:1px solid var(--line)}
@media(max-width:860px){.masthead{position:relative;display:flex;align-items:flex-start;flex-direction:column;padding:18px}.masthead nav{flex-wrap:wrap}.call{justify-self:start}.hero{grid-template-columns:1fr}.hero-text{padding:54px 18px}.hero img{min-height:360px}.capabilities,.workflow,.outputs,.contact{padding:56px 18px}.matrix,.workflow,.output-grid{grid-template-columns:1fr}}
.email-link{display:inline-flex;margin-left:14px;font-weight:900;color:#fff;text-underline-offset:5px}
.pro-about{padding:82px 44px;background:var(--panel);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.pro-about h2{max-width:920px;margin:0;font-size:clamp(34px,4vw,60px);line-height:1}.pro-about p:last-child{max-width:780px;color:var(--muted);font-size:19px}
@media(max-width:860px){.email-link{display:flex;margin:16px 0 0}}
@media(max-width:860px){.pro-about{padding:56px 18px}}
.examples,.faq{padding:82px 44px;background:var(--bg)}.examples h2,.faq h2{margin:0 0 30px;font-size:clamp(34px,4vw,60px);line-height:1}.example-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.example-grid article{padding:24px;border:1px solid var(--line);background:var(--panel);min-height:190px}.example-grid h3{margin:0 0 12px;font-size:22px}.example-grid p,.faq p{color:var(--muted)}.faq details{border-top:1px solid var(--line);padding:20px 0}.faq details:last-child{border-bottom:1px solid var(--line)}.faq summary{cursor:pointer;font-weight:900;font-size:18px}@media(max-width:860px){.examples,.faq{padding:56px 18px}.example-grid{grid-template-columns:1fr}}
.image-story{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;padding:0 44px 82px;background:var(--bg)}.image-story figure{margin:0;overflow:hidden;border:1px solid var(--line);background:var(--panel)}.image-story img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}@media(max-width:860px){.image-story{grid-template-columns:1fr;padding:0 18px 56px}}
.hero{grid-template-columns:1fr;min-height:auto}.hero-text{max-width:920px}.hero>img{display:none}

/* Top image strip inspired by hirepatternmaker.com */
.top-image-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:26px 42px 0;background:inherit}
.top-image-strip figure{margin:0;overflow:hidden;border:1px solid var(--line, rgba(0,0,0,.12));background:rgba(255,255,255,.55)}
.top-image-strip img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
@media(max-width:860px){.top-image-strip{grid-template-columns:1fr;padding:18px 18px 0}}

/* Unique page-purpose section for transparent SEO and clearer visitor intent */
.search-intent{padding:68px 42px;background:var(--paper, var(--cream, var(--soft, var(--panel, #fff))));border-top:1px solid var(--line, rgba(0,0,0,.12));border-bottom:1px solid var(--line, rgba(0,0,0,.12))}
.search-intent .intent-label{margin:0 0 12px;color:var(--teal, var(--sage, var(--green, var(--blue, var(--wine, var(--red, #555))))));font:900 12px/1 Arial,Helvetica,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.search-intent h2{margin:0;max-width:980px;font-size:clamp(30px,4vw,58px);line-height:1.03;letter-spacing:0}
.search-intent p:not(.intent-label){max-width:840px;margin:22px 0 0;color:var(--muted, #5f6368);font-size:18px;line-height:1.7}
.search-intent ul{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:30px 0 0;padding:0;list-style:none}
.search-intent li{padding:20px;border:1px solid var(--line, rgba(0,0,0,.12));background:rgba(255,255,255,.72);color:var(--muted, #5f6368);line-height:1.55}
@media(max-width:860px){.search-intent{padding:52px 18px}.search-intent ul{grid-template-columns:1fr}.search-intent p:not(.intent-label){font-size:16px}}