/*
 * Inventum visual rhythm
 *
 * This is the final shared layer for every route. Blue is the structure;
 * the turquoise endpoint is the signal of progress. Square planes, fine
 * rules and deliberate offset shadows remain the visual language — they are
 * not applied as generic decoration.
 */
:root {
  --ink: #062d4a;
  --deep: #003b6d;
  --blue: #0063b4;
  --sky: #84c8ea;
  --paper: #f7fcff;
  --mist: #e2f5fb;
  --line: #b9dff0;
  --signal: #34d399;
  --aqua: #34d399;
  --surface: #ffffff;
  --surface-soft: #f2f9fd;
  --surface-tint: #eaf7fb;
  --surface-aqua: #e8f8f5;
  --copy: #315b76;
  --copy-muted: #486b82;
  --rule: #b9dff0;
  --accent-end: var(--signal);
  --offset: clamp(5px, .5vw, 7px);
  --offset-active: clamp(3px, .32vw, 4px);
  --offset-large: clamp(8px, .85vw, 12px);
  --section-space: clamp(3.5rem, 6.6vw, 6.75rem);
}

html { text-size-adjust: 100%; }

body {
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(52, 211, 153, .28); color: var(--ink); }

:where(a, button, input, textarea, select):focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

/* Small type is still navigation, not fine print. */
:is(
  .eyebrow,
  .cap-meta,
  .method-steps li > span,
  .form-heading > span,
  .sme-note span,
  .sme-value article span,
  .sme-sectors .sector-grid span,
  .compliance-list span,
  .journal-card span,
  .work-number,
  .breadcrumb,
  .article-related small,
  .article-figure figcaption,
  .decision-grid span,
  .decision-paths b
) {
  font-size: clamp(.72rem, .38vw + .64rem, .8rem);
  line-height: 1.45;
  letter-spacing: .075em;
}

:is(
  .lede,
  .hero-copy > p:last-child,
  .section-intro > p,
  .cap-body p,
  .method-steps p,
  .contact-copy > p:last-child,
  .ai-intro > p:last-child,
  .insight-teaser p,
  .odoo-partner-copy > p:last-child,
  .sme-route div > p,
  .sme-note p,
  .sme-steps li p,
  .sme-value > div > p,
  .sme-compliance > div > p,
  .sme-final p,
  .journal-hero > p,
  .journal-card p,
  .work-info > p:not(.work-number)
) {
  color: var(--copy);
  line-height: 1.78;
}

/* Use one quiet action language: a blue keyline for links, a signal offset for buttons. */
:is(.text-link, .work-link, .email-fallback, .journal-card a, .article-aside a) {
  display: inline-flex;
  align-items: center;
  gap: .34rem;
  min-height: 1.9rem;
  padding-bottom: .12rem;
  border-bottom: 1px solid rgba(0, 99, 180, .62);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.45;
  text-decoration: none;
  transition: color .18s ease, border-color .18s ease;
}

:is(.text-link, .work-link, .email-fallback, .journal-card a, .article-aside a):hover {
  border-color: var(--accent-end);
  color: var(--blue);
}

.sme-route .text-link {
  display: inline-flex;
  min-height: 1.9rem;
  padding: 0 0 .12rem;
  border-bottom-color: rgba(0, 99, 180, .62);
  background: transparent;
  color: var(--ink);
  font-size: .92rem;
}

.button-primary,
.portfolio-close .button-primary {
  border: 1px solid transparent;
  background: linear-gradient(115deg, #0063b4 0%, #007bc3 62%, #079ca5 100%);
  box-shadow: var(--offset) var(--offset) 0 #76ddcb;
  color: #fff;
  transition: transform .2s cubic-bezier(.2, .8, .2, 1), box-shadow .2s cubic-bezier(.2, .8, .2, 1), filter .2s ease;
}

.button-primary:hover,
.portfolio-close .button-primary:hover {
  box-shadow: var(--offset-active) var(--offset-active) 0 #76ddcb;
  color: #fff;
  filter: saturate(1.04);
  transform: translate(2px, 2px);
}

/* Offset shadows mark primary interaction and browser previews only. */
.contact-form { box-shadow: var(--offset-large) var(--offset-large) 0 #76ddcb; }
.portfolio-page .work-visual { box-shadow: var(--offset-large) var(--offset-large) 0 #76ddcb; }
.project-fan { box-shadow: var(--offset) var(--offset) 0 var(--rule); }

.sme-note {
  border: 1px solid var(--rule);
  border-left: 3px solid var(--blue);
  background: linear-gradient(135deg, var(--surface-soft), var(--surface-tint));
  box-shadow: none;
}

.odoo-partner,
.sme-route {
  border-color: var(--rule);
  background: linear-gradient(118deg, rgba(242, 249, 253, .96), rgba(234, 247, 251, .92) 68%, rgba(232, 248, 245, .84));
}

.odoo-partner { border-block: 1px solid var(--rule); }

/* The contact footer is shared by the landing, journal and article routes. */
.site-footer {
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem clamp(1.25rem, 4.5vw, 4rem) max(2.2rem, calc(1.5rem + env(safe-area-inset-bottom)));
  display: grid;
  grid-template-columns: 1.05fr .8fr 1.3fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  border-top: 1px solid var(--rule);
  color: var(--copy-muted);
}

.footer-brand p,
.footer-address p { margin: .65rem 0 0; font-size: .82rem; line-height: 1.68; }

.footer-contact,
.footer-address { display: grid; gap: .46rem; font-style: normal; }

.footer-contact > span,
.footer-address > span { color: var(--blue); font: 600 .75rem/1.45 var(--mono); letter-spacing: .075em; }

.footer-contact a { width: fit-content; color: var(--ink); font-size: .88rem; line-height: 1.5; }
.footer-contact a:not(.zalo-link) { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 4px; }
.zalo-link { display: inline-flex; align-items: center; gap: .35rem; color: var(--blue) !important; font-weight: 700; }
.zalo-link b { line-height: 1; transition: transform .18s ease; }
.zalo-link:hover b { transform: translate(2px, -2px); }

/* A shared vertical rhythm; feature moments keep their own graphic rather than extra empty canvas. */
.capabilities,
.ai-journey,
.insight-teaser,
.contact,
.method,
.sme-steps,
.sme-value,
.sme-sectors,
.sme-compliance {
  padding-block: var(--section-space);
}

.insight-teaser { gap: clamp(2rem, 6vw, 5.5rem); }

.working-day-premise { background: linear-gradient(108deg, rgba(226, 245, 251, .66), rgba(247, 252, 255, .88) 54%, rgba(232, 248, 245, .48)); }

/* The reading layer uses the same ink values across every information surface. */
.article-main p,
.article-main li,
.article-market-context p,
.article-market-context li,
.decision-grid p,
.decision-grid li,
.decision-paths li {
  color: var(--copy) !important;
}

.article-main .dek,
.article-figure > p,
.article-aside p,
.article-market-context .source-note,
.article-decision-guide .source-note {
  color: var(--copy-muted) !important;
}

.article-figure,
.article-market-context,
.article-decision-guide {
  border-color: var(--rule);
  background: linear-gradient(128deg, rgba(234, 247, 251, .9), rgba(247, 252, 255, .96));
}

.article-related a,
.value-cards article,
.compliance-list article,
.checkpoint-grid > div {
  border-color: var(--rule);
  background: rgba(255, 255, 255, .8);
}

.article-related a:hover { background: var(--surface-tint); }

/* The editorial grid stays square and dense; its last unpaired card becomes a deliberate conclusion. */
.journal-list,
.sector-grid,
.decision-grid { border-color: var(--rule); background: var(--rule); }

.journal-card { background: var(--paper); transition: background .22s ease, box-shadow .22s ease; }
.journal-card:hover { background: var(--surface-tint); box-shadow: inset 3px 0 0 var(--accent-end); }
.journal-card a { width: fit-content; color: var(--blue); font-family: var(--body); font-size: .86rem; letter-spacing: 0; }

@media (min-width: 801px) {
  .journal-card:last-child:nth-child(odd) {
    min-height: 194px;
    grid-column: 1 / -1;
    grid-template-columns: minmax(13rem, .72fr) minmax(0, 1.12fr) auto;
    grid-template-rows: auto 1fr;
    column-gap: clamp(1.5rem, 4vw, 4rem);
    align-items: end;
    background: linear-gradient(118deg, #f3fbff, #eef9f8);
  }

  .journal-card:last-child:nth-child(odd) > span { grid-column: 1; grid-row: 1; }
  .journal-card:last-child:nth-child(odd) > h2 { grid-column: 1; grid-row: 2; }
  .journal-card:last-child:nth-child(odd) > p { grid-column: 2; grid-row: 1 / -1; align-self: center; max-width: 31rem; }
  .journal-card:last-child:nth-child(odd) > a { grid-column: 3; grid-row: 1 / -1; align-self: center; white-space: nowrap; }

  .sector-grid > a:last-child:nth-child(odd) {
    min-height: 168px;
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: minmax(14rem, .85fr) minmax(0, 1.25fr) auto;
    grid-template-rows: auto 1fr;
    column-gap: clamp(1.2rem, 3vw, 3rem);
    align-items: center;
    background: linear-gradient(118deg, var(--surface-soft), var(--surface-tint));
  }

  .sector-grid > a:last-child:nth-child(odd) > span { grid-column: 1; grid-row: 1; }
  .sector-grid > a:last-child:nth-child(odd) > h3 { grid-column: 1; grid-row: 2; margin: .45rem 0 0; }
  .sector-grid > a:last-child:nth-child(odd) > p { grid-column: 2; grid-row: 1 / -1; max-width: 34rem; }
  .sector-grid > a:last-child:nth-child(odd) > b { grid-column: 3; grid-row: 1 / -1; margin: 0; padding: 0; white-space: nowrap; }
}

/* The portfolio is intentionally its own gallery; it still follows the shared readable scale. */
.work-info > p:not(.work-number) {
  font-size: clamp(1rem, 1.1vw, 1.1rem);
  line-height: 1.76;
}

.work-link { font-size: .92rem; }

@media (max-width: 800px) {
  .site-header .menu {
    border: 1px solid var(--rule);
    border-top: 3px solid var(--blue);
    box-shadow: var(--offset-large) var(--offset-large) 0 rgba(118, 221, 203, .58);
  }

  .capabilities,
  .ai-journey,
  .insight-teaser,
  .contact,
  .method,
  .sme-steps,
  .sme-value,
  .sme-sectors,
  .sme-compliance { padding-block: clamp(3.25rem, 9vw, 4.5rem); }

  .sme-hero { min-height: 0; padding-block: clamp(4.75rem, 13vw, 6rem) 3.75rem; }
  .sme-page .sme-hero h1 { font-size: clamp(2.75rem, 11vw, 4.2rem); }
  .work-info > p:not(.work-number) { font-size: 1rem; }
  .journal-card a { min-height: 2.5rem; font-size: .9rem; }

  .site-footer { grid-template-columns: 1fr 1fr; }
  .footer-address { grid-column: 1 / -1; padding-top: 1rem; border-top: 1px solid var(--rule); }
}

@media (max-width: 700px) {
  /* The oversized SME watermark has no job on a narrow screen and can enlarge its scroll box. */
  .sme-route::after { display: none; }
}

@media (min-width: 801px) {
  .sme-page .sme-hero h1 { font-size: clamp(3.2rem, 5.65vw, 5.8rem); }
  .sme-page :is(.sme-steps h2, .sme-value h2, .sme-sectors h2, .sme-compliance h2, .sme-final h2) { font-size: clamp(2.6rem, 4.55vw, 5.15rem); }
}

@media (max-width: 800px) {
  .sector-grid > a:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

@media (max-width: 530px) {
  .site-footer { grid-template-columns: 1fr; }
  .footer-address { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  :is(.button-primary, .portfolio-close .button-primary, .journal-card, .text-link, .work-link, .email-fallback, .article-aside a) { transition: none; }
}