/* Operizia: a light product and engineering identity, shared by every page. */
:root {
  --ink: #15171a; --muted: #626673; --teal: #214d83; --deep: #191b1e;
  --lime: #315f98; --bg: #ffffff; --paper: #f8f8f9; --line: #e5e8eb;
  --blue: #254f86; --blue-soft: #6f94c5; --mono: 'Geist Mono', ui-monospace, monospace;
  --section-space: clamp(64px, 7vw, 104px);
}
body { font-family: Geist, Arial, sans-serif; background: var(--bg); color: var(--ink); }
h1, h2, h3 { font-family: Geist, Arial, sans-serif; font-weight: 560; }
h2 { font-weight: 550; letter-spacing: -.04em; }
a, button, input, select, textarea { -webkit-tap-highlight-color: #3063ab15; }
.eyebrow, .pill, .pricing-kicker, .footer-label, .plan-view,
.study-module-label, .solution-architecture-label, .automation-map-label,
.workflow-card-meta, .library-dialog-header > span { font-family: var(--mono); font-weight: 450; letter-spacing: .045em; }
.eyebrow { color: #73787e; font-size: 11px; }
.eyebrow::before { background: var(--blue); border-radius: 2px; }
.status-dot { background: var(--blue); box-shadow: 0 0 0 4px #254f8610; }
.eyebrow.light { color: #6e747c; }
.eyebrow.light::before { background: var(--blue-soft); }
.btn { border-color: #222427; background: #222427; color: #fff; box-shadow: 0 1px 2px #181c2210; font-weight: 500; }
.btn:hover { border-color: #43474c; background: #43474c; transform: none; }
.btn-lime { background: #2f61a7; border-color: #2f61a7; color: #fff; }
.btn-lime:hover { background: #295592; border-color: #295592; }
.text-link { color: #36393e; border-color: #d3d6db; font-weight: 500; }
.text-link:hover { color: var(--teal); border-color: #9fb2cd; }
.highlight { background: none; color: #2f60a5; }
h1 .highlight { background: none; color: #214d83; -webkit-text-fill-color: currentColor; }
.site-header { background: #ffffffd1; border-color: #e5e8ebb3; backdrop-filter: blur(12px) saturate(115%); -webkit-backdrop-filter: blur(12px) saturate(115%); }
.header-inner { min-height: 78px; }
.nav-links a { color: #61656a; font-size: 13px; font-weight: 450; }
.nav-links a::after { background: #336ab6; }
.nav .nav-contact { border-color: #222427; font-size: 12px; }
.mobile-toggle { color: #484c51; border-color: #e0e2e6; }
.mobile-toggle:hover, .nav-links a:hover { background-color: #f6f8fb; }
.site-footer { border-color: var(--line); background: #f9f9fa; }
.footer-label { color: #75797f; }
.footer-brand > p, .footer-project > p:not(.footer-label), .footer-links a,
.footer-legal a, .footer-bottom { color: #6d7279; }
.footer-contact { color: #3d4147; border-color: #cbd1d9; }
.footer-contact:hover { color: var(--teal); }
/* A broad headline and a real interface composition replace the agency layout. */
.hero-wrap { position: relative; isolation: isolate; overflow: hidden; background: #fff; }
.hero-wrap::before { content: ''; position: absolute; z-index: -1; inset: 0 0 2%; pointer-events: none; background-image: radial-gradient(ellipse at 22% 56%, #3771c212, transparent 43%), radial-gradient(ellipse at 80% 63%, #356dbb1a, transparent 42%), linear-gradient(#70829b07 1px, transparent 1px), linear-gradient(90deg, #70829b07 1px, transparent 1px); background-size: auto, auto, 48px 48px, 48px 48px; mask-image: linear-gradient(#000, #000 70%, transparent); }
.hero { grid-template-columns: minmax(0, 1fr); gap: 34px; padding-block: 54px 32px; }
.hero-copy { display: flex; flex-direction: column; align-items: center; max-width: 1120px; margin-inline: auto; text-align: center; }
.hero-copy > .eyebrow { justify-content: center; margin-bottom: 20px; color: #606572; }
.hero h1 { max-width: 1100px; margin-bottom: 22px; font-size: clamp(44px, 4.6vw, 68px); font-weight: 550; line-height: 1.07; letter-spacing: -.055em; text-wrap: initial; }
.hero h1 br { display: block; }
.hero p { max-width: 71ch; margin-bottom: 24px; font-size: 16px; line-height: 1.7; }
.hero-actions { justify-content: center; gap: 12px 24px; }
.hero-actions .text-link { border: 1px solid #dee1e5; border-radius: 6px; padding-inline: 18px; min-height: 52px; background: #ffffffb3; }
.hero-note { display: none; }
.hero-client-proof { margin-top: 18px; padding-top: 0; border: 0; gap: 10px; text-align: left; }
.hero-client-rating > strong { color: #363a3f; }
.hero-client-stars { color: #3064ab; }
.hero-client-caption { color: #777c82; }
.hero-client-caption > span { color: #7490b8; }
.scope-strip { padding-block: 21px; background: transparent; border-color: #e8ebee; }
.scope-strip > span { font-family: var(--mono); font-size: 11px; color: #8c9096; }
.scope-strip > div > span { color: #767b81; font-size: 12px; }
/* The problem is explained through the work itself, rather than stock imagery. */
.problem-visual.process-map { align-self: center; min-height: 0; padding: 30px; border: 1px solid #e5e8ed; border-radius: 9px; background: linear-gradient(140deg, #fbfcfe, #fafcfe); overflow: visible; }
.process-map::after { display: none; }
.process-caption { margin-bottom: 24px; color: #7f858d; font-family: var(--mono); font-size: 10px; letter-spacing: .05em; }
.process-source { display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid #e1e5eb; border-radius: 6px; background: #fff; }
.process-source > svg { width: 28px; height: 28px; color: #aab9cf; }
.process-source > div { display: flex; flex-direction: column; gap: 4px; }
.process-source strong { color: #474d55; font-size: 14px; font-weight: 500; }
.process-source small { color: #767d8f; font-size: 10px; }
.process-branches { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; padding-top: 36px; }
.process-branches::before { content: ''; position: absolute; top: 18px; left: 16.5%; right: 16.5%; height: 17px; border: 1px dashed #ccd3dd; border-bottom: 0; border-radius: 3px 3px 0 0; }
.process-branches::after { content: ''; position: absolute; top: 0; left: 50%; height: 36px; border-left: 1px dashed #ccd3dd; }
.process-branches > span { display: flex; align-items: center; flex-direction: column; gap: 12px; padding: 18px 10px; border: 1px solid #e5e8ed; border-radius: 5px; background: #fff; color: #676d75; font-size: 12px; }
.process-branches svg { width: 22px; height: 22px; color: #adb9ca; }
.process-manual { padding-block: 18px; color: #848d99; font-family: var(--mono); font-size: 10px; text-align: center; }
.process-result { padding: 18px; border: 1px solid #e3e8ef; border-radius: 5px; background: #f5f7fa; }
.process-result strong { display: block; margin-bottom: 5px; color: #647388; font-size: 14px; font-weight: 500; }
.process-result p { margin: 0; color: #717984; font-size: 11px; line-height: 1.6; }
/* Light architecture surfaces; blue tones indicate connections and actions. */
.system-section { color: var(--ink); background-color: #f9fafb; background-image: radial-gradient(ellipse at 72% 45%, #2f62a80a, transparent 60%); border-block: 1px solid #eceef1; }
.system-copy h2 span { color: #2f60a5; }
.system-copy p, .check-list { color: #626775; }
.check-list li::before { color: #889fc0; }
.module-tabs { border-color: #e7e9ed; }
.module-tabs button { color: #8c9199; }
.module-tabs button[aria-selected="true"] { border-color: #3874c7; background: #f6f9fc; color: #244d7d; }
.module-tabs button:hover { background: #fafbfd; }
.module-artwork img, .possibility-artwork { border-color: #eaecf0; background: #fafbfc; }
.pill { border-color: #e3e8f0; background: #f6f8fb; color: #8f9bad; }
.case-section, .fit-section, .study-scope, .study-next { background: #f9f9fa; border-color: #e9ecef; }
.case-testimonial { background: #fcfdfe; border-color: #dde3eb; box-shadow: 0 6px 24px #47586f04; }
.testimonial-stars { color: #a1b0c6; }
.testimonial-label { color: #808a97; }
.case-testimonial blockquote p { color: #555a61; }
.case-testimonial blockquote strong { color: #30363f; }
.case-testimonial figcaption { border-color: #e3e7ed; }
.testimonial-initials { color: #7a8798; background: #f3f6fa; border-color: #dce2ea; }
.testimonial-author strong { color: #4d5663; }
.testimonial-author > span, .testimonial-company { color: #7e8998; }
.case-benefit-icon, .sector-icon, .study-module-icon, .mission-outcome-icon { color: #9aa7ba; border-color: #e5eaf0; background: #f6f9fc; }
.pricing-card { background: #fff; border-color: #e5e7eb; }
.pricing-card-accent { background: #fff; border-color: #b3c2d7; box-shadow: inset 0 3px 0 #a1b4ce, 0 10px 24px #687e9e05; }
.pricing-card h3 { color: #262a2f; }
.pricing-card-heading { border-color: #e7eaee; }
.pricing-features li { color: #6e757e; }
.pricing-card .pricing-more, .pricing-card .pricing-button { border-color: #dce0e5; color: #626973; background: #fff; }
.pricing-card-accent .pricing-button { background: #2d5c9f; border-color: #2d5c9f; color: #fff; }
.pricing-card .pricing-more:hover, .pricing-card .pricing-button:hover { background: #f5f7fa; border-color: #b8c2d1; }
.pricing-card-accent .pricing-button:hover { background: #5578a8; border-color: #5578a8; }
.contact-section, .offer-close, .mission-next, .library-next { color: var(--ink); border-top: 1px solid #e7ebf1; background: linear-gradient(125deg, #f7f9fc, #f6f9fc); }
.landing-contact h2 span, .contact h2 span, .mission-next h2 span { color: #728aab; }
.contact-intro p, .offer-close p, .mission-next p, .library-next p { color: #6b727c; }
.offer-close h2 { color: #39404a; }
.library-next .text-link { color: #77869c; border-color: #d0d7e1; }
.automation-ai-section, .solution-ai-section, .mission-field { color: var(--ink); background: #f7f9fb; border-block: 1px solid #eceff3; }
.automation-ai-layout h2, .solution-ai-layout h2, .mission-field-copy h2 { color: var(--ink); }
.automation-ai-layout > div > p, .solution-ai-layout > div > p,
.automation-ai-list p, .solution-ai-list p, .mission-field-copy > p { color: var(--muted); }
.automation-ai-list h3, .solution-ai-list h3 { color: #3f4348; }
.automation-ai-list > li, .solution-ai-list > li { border-color: #e3e8ee; }
.mission-principle { background: #f6f9fc; border-color: #e5eaf0; }
.mission-principle p { color: #7c8695; }
.mission-principle strong { color: #58677d; }
.mission-principle::after { background: #e0e5eb; }
.mission-principle-mark i { background: #b0bdce; }
.mission-principle-mark i + i { background: #9dacc1; }
.mission-field-copy h2 span { color: #7e92ae; }
.mission-field-points strong { color: #464a4f; }
.mission-field-points span { color: #73777c; }
.mission-field-points, .mission-field-points > div { border-color: #e0e5ed; }
.mission-field img { filter: grayscale(1); }
.mission-field figcaption { background: linear-gradient(transparent, #f7f9fbf5); color: #5e6773; }
.study-architecture { background: #fafbfc; border-color: #e3e8ee; }
.study-architecture-label { color: #748296; }
.study-architecture figcaption { color: #707882; border-color: #e2e7ef; }
.study-architecture-label > span { background: #b4c0d1; }
.library-demo { background: #f9fafc; border-color: #dde2ea; box-shadow: 0 10px 30px #7a8aa006; }
.library-demo-heading { color: #707780; border-color: #e2e6ec; }
.library-demo-step > div > span { color: #6f7885; }
.library-demo-step strong { color: #484f59; }
.library-demo-step p, .library-demo figcaption { color: #6a717a; }
.library-demo-icon { color: #8b99ac; border-color: #dee3eb; background: #f0f4f9; }
.library-demo-icon-ai { color: #8595ac; border-color: #dce3ed; background: #e7edf6; }
.library-demo-step:not(:last-child)::before { background: #dbe1e9; }
.library-demo figcaption { border-color: #e2e6ec; }
.automation-hero, .solution-hero, .mission-hero, .library-hero, .study-hero,
.contact-page { background-image: radial-gradient(ellipse at 80% 0, #3166af07, transparent 58%); }
.contact-page .contact input, .contact-page .contact textarea,
.contact-page .contact .offer-select, .contact-page .contact .phone-control { background: #fdfdfe; border-color: #e3e6eb; color: #444b54; }
.phone-country-display { color: #788496; }
.contact-page .contact input::placeholder, .contact-page .contact textarea::placeholder,
.contact-page .contact .offer-select:required:invalid { color: #737880; }
.contact-page .contact input:focus, .contact-page .contact textarea:focus,
.contact-page .contact .offer-select:focus, .phone-control:focus-within,
.phone-country:focus-within, .library-search-control:focus-within { outline-color: #859ab7; }
.hero-actions .btn { background: #1b3f70; border-color: #1b3f70; }
.hero-actions .btn:hover { background: #15335c; border-color: #15335c; }

@media (max-width: 1100px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  :root { --section-space: 44px; }
  .header-inner { min-height: 64px; }
  .nav { background: #fffffff2; }
  .nav-links a { font-size: 17px; }
  .nav .nav-contact { font-size: 14px; }
  .eyebrow { font-size: 10px; }
  .hero { padding-block: 28px 20px; gap: 22px; }
  .hero-copy { max-width: 620px; }
  .hero-copy > .eyebrow { margin-bottom: 16px; font-size: 9px; }
  .hero h1 { margin-bottom: 18px; font-size: clamp(33px, 8.5vw, 42px); font-weight: 550; line-height: 1.1; letter-spacing: -.05em; }
  .hero p { margin-bottom: 20px; font-size: 15px; line-height: 1.6; }
  .hero-actions { display: grid; grid-template-columns: 1.2fr 1fr; width: min(100%, 390px); gap: 8px; }
  .hero-actions .btn, .hero-actions .text-link { min-height: 46px; padding: 12px; font-size: 12.5px; gap: 9px; }
  .hero-actions .btn > span { font-size: 17px; }
  .hero-client-proof { margin-top: 16px; }
  .scope-strip { padding-block: 16px; }
  .scope-strip > span { font-size: 10px; }
  .scope-strip > div > span { font-size: 11px; }
  .problem-visual.process-map { padding: 22px; aspect-ratio: auto; }
  .process-caption { font-size: 9px; margin-bottom: 18px; }
  .process-source { padding: 14px; gap: 12px; }
  .process-source strong { font-size: 13px; }
  .process-source small { font-size: 9px; }
  .process-branches { gap: 8px; padding-top: 30px; }
  .process-branches::after { height: 30px; }
  .process-branches > span { padding: 15px 7px; gap: 9px; font-size: 11px; }
  .process-manual { padding-block: 14px; font-size: 9px; }
  .process-result { padding: 14px; }
  .process-result strong { font-size: 13px; }
  .process-result p { font-size: 10px; }
  .footer-label, .footer-group > .footer-label { color: #747981; font-family: var(--mono); }
  .footer-brand > p, .footer-project > p:not(.footer-label), .footer-links a,
  .footer-legal a, .footer-bottom { color: #686c79; }
  .footer-contact { color: #5d646f; }
}