/* ValonyLabs — design system refresh (2026-09)
   Same routes, same brand, same architecture — elevated execution.
   No external fonts or runtime dependencies; CSP-safe (no inline styles). */

:root {
  --ink:#122e2c;
  --muted:#587069;
  --teal:#0b5550;
  --teal-bright:#10756d;
  --teal-glow:#17a193;
  --deep:#062f2e;
  --abyss:#032120;
  --paper:#fbfdfc;
  --soft:#f0f5f2;
  --line:#dce6e1;
  --focus:#bb7500;
  --radius:14px;
  --shadow-sm:0 1px 2px rgba(3,33,32,.05),0 4px 14px -6px rgba(3,33,32,.08);
  --shadow-md:0 2px 6px rgba(3,33,32,.06),0 18px 44px -18px rgba(3,33,32,.22);
  --shadow-lg:0 30px 70px -28px rgba(3,33,32,.35);
  --sans:'Inter Tight',Inter,system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --mono:ui-monospace,'SF Mono','JetBrains Mono',Menlo,Consolas,monospace;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--paper);
  font-synthesis:none;
  scroll-behavior:smooth;
  scroll-padding-top:110px
}
* { box-sizing:border-box }
body { margin:0; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility }
a { color:inherit; text-underline-offset:5px }
button,input,textarea { font:inherit }
button,a,input,textarea { -webkit-tap-highlight-color:transparent }
button { cursor:pointer }
img,video { display:block; max-width:100% }
img { object-fit:cover }
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible {
  outline:3px solid var(--focus);
  outline-offset:5px;
  border-radius:4px
}
h1,h2,h3,p { margin-top:0 }
h1,h2,h3 { font-weight:600; text-wrap:balance }
h1 { font-size:clamp(2.35rem,5vw,3.8rem); line-height:1.06; letter-spacing:-.04em }
h2 { font-size:clamp(1.8rem,3vw,2.6rem); line-height:1.14; letter-spacing:-.028em }
h3 { font-size:1.35rem; line-height:1.25; letter-spacing:-.01em }
p { line-height:1.72 }
button[hidden],[hidden] { display:none!important }
.container { width:min(1160px,calc(100% - 64px)); margin-inline:auto }
.section { padding:104px 0 }
.eyebrow {
  font-family:var(--mono);
  font-size:.72rem;
  text-transform:uppercase;
  font-weight:600;
  letter-spacing:.22em;
  color:var(--teal);
  margin-bottom:22px;
  display:flex;
  align-items:center;
  gap:12px
}
.eyebrow:before { content:''; width:26px; height:1px; background:var(--teal); flex:none }
.skip-link {
  position:fixed; top:12px; left:16px; z-index:100;
  background:#fff; padding:12px 16px; border-radius:8px; box-shadow:var(--shadow-md);
  transform:translateY(-160%); transition:transform .2s
}
.skip-link:focus { transform:none }

/* ---------- announcement ---------- */
.announcement {
  text-align:center;
  background:linear-gradient(90deg,var(--abyss),var(--deep) 45%,var(--abyss));
  padding:11px 24px;
  font-size:.74rem;
  line-height:1.5;
  letter-spacing:.02em;
  color:#cfe4dc
}
.announcement strong { color:#9fe8b8; font-weight:600 }

/* ---------- header ---------- */
.site-header {
  position:sticky; top:0; z-index:50;
  background:rgba(251,253,252,.86);
  backdrop-filter:blur(14px) saturate(1.3);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid transparent;
  transition:border-color .25s, box-shadow .25s
}
.site-header.scrolled { border-bottom-color:var(--line); box-shadow:0 8px 30px -18px rgba(3,33,32,.25) }
.header-inner { height:92px; display:flex; align-items:center; gap:38px }
.brand { margin-right:auto; flex-shrink:0; display:flex; align-items:center; gap:14px; text-decoration:none }
.brand img { border-radius:8px; box-shadow:var(--shadow-sm) }
.brand-name { font-weight:700; letter-spacing:-.02em; font-size:1.06rem; line-height:1.1 }
.brand-name small { display:block; font-family:var(--mono); font-weight:500; font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted) }
#main-nav { display:flex; align-items:center; gap:32px }
#main-nav a { font-size:.9rem; font-weight:500; text-decoration:none; padding:10px 0; position:relative }
#main-nav a:after {
  content:''; position:absolute; left:0; right:100%; bottom:4px; height:2px;
  background:var(--teal); border-radius:2px; transition:right .22s ease
}
#main-nav a:hover:after,#main-nav a[aria-current]:after { right:0 }
#main-nav a:hover,#main-nav a[aria-current] { color:var(--teal); box-shadow:none }
.header-tools { display:flex; align-items:center; gap:26px }
.language { text-decoration:none; font-size:.78rem; font-weight:700; letter-spacing:.06em }
.language span { margin-left:6px }
.socials { display:flex; gap:20px; align-items:center }
.socials a { font-size:1.12rem; font-weight:700; text-decoration:none; opacity:.75; transition:opacity .15s }
.socials a:hover { opacity:1 }
.menu-toggle { display:none }

/* ---------- optional entry motion; content never depends on JS visibility ---------- */
.reveal.in { animation:reveal-entry .7s cubic-bezier(.22,1,.36,1) }
.reveal-d1.in { animation-delay:.1s }
.reveal-d2.in { animation-delay:.2s }
.reveal-d3.in { animation-delay:.32s }
.reveal:focus-within { animation:none }
@keyframes reveal-entry {
  from { translate:0 16px }
  to { translate:0 0 }
}

/* ---------- hero ---------- */
.hero {
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--abyss); color:#fff
}
.hero-media { position:absolute; inset:0; z-index:-2; background:url('/assets/hero-poster.jpg') center/cover }
.hero-media video { width:100%; height:100%; object-fit:cover }
.hero-grid-overlay {
  position:absolute; inset:0; z-index:-1;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:72px 72px;
  -webkit-mask-image:radial-gradient(75% 65% at 50% 35%,#000 20%,transparent 78%);
  mask-image:radial-gradient(75% 65% at 50% 35%,#000 20%,transparent 78%)
}
.hero:after {
  content:''; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(52% 42% at 50% 12%,rgba(23,161,147,.28),transparent 70%),
    linear-gradient(180deg,rgba(2,26,25,.82),rgba(3,33,32,.66) 48%,rgba(2,24,23,.9))
}
.hero-content { padding-top:110px; padding-bottom:88px; text-align:center }
.hero .eyebrow { justify-content:center; color:var(--teal-glow) }
.hero .eyebrow:before { background:var(--teal-glow) }
.hero h1 { max-width:900px; margin:0 auto 26px; font-weight:650 }
.hero-intro { max-width:640px; margin:0 auto 34px; color:#d9eae4; font-size:1.08rem }
.button {
  display:inline-flex; align-items:center; justify-content:center; gap:14px;
  border-radius:999px; padding:16px 32px;
  background:var(--teal); color:#fff; border:1px solid var(--teal);
  text-decoration:none; font-size:.92rem; font-weight:600; line-height:1.3;
  transition:background .18s, transform .18s, box-shadow .18s
}
.button .arrow { display:inline-block; transition:transform .18s }
.button:hover { background:var(--deep); transform:translateY(-2px); box-shadow:0 16px 34px -12px rgba(6,47,46,.55) }
.button:hover .arrow { transform:translate(3px,-2px) }
.button:disabled { cursor:default; opacity:.6 }
.button-outline { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.45); padding-inline:38px; backdrop-filter:blur(4px) }
.button-outline:hover { background:rgba(255,255,255,.12); box-shadow:none }
.hero-ctas { display:flex; flex-wrap:wrap; gap:14px; justify-content:center }

/* sector cards */
.sector-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:78px; text-align:left }
.sector-card {
  position:relative; overflow:hidden;
  border:1px solid rgba(255,255,255,.16); border-radius:var(--radius);
  padding:26px 26px 24px; background:rgba(255,255,255,.06);
  text-decoration:none; backdrop-filter:blur(8px);
  transition:transform .2s, background .2s, border-color .2s
}
.sector-card:before {
  content:''; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,var(--teal-glow),transparent 70%);
  opacity:0; transition:opacity .25s
}
.sector-card:hover { background:rgba(255,255,255,.11); transform:translateY(-4px); border-color:rgba(255,255,255,.28) }
.sector-card:hover:before { opacity:1 }
.sector-number { font-family:var(--mono); font-size:.7rem; letter-spacing:.18em; color:#8fd8cd }
.sector-card h2 { font-size:1.28rem; letter-spacing:-.01em; margin:16px 0 12px }
.sector-card p { font-size:.86rem; line-height:1.66; color:#cfe2db; margin-bottom:0 }
.video-toggle {
  position:absolute; bottom:14px; left:20px; font-size:.66rem; font-family:var(--mono); letter-spacing:.08em;
  background:rgba(3,42,39,.7); border:1px solid rgba(255,255,255,.3); color:#fff;
  border-radius:20px; padding:7px 13px; backdrop-filter:blur(4px)
}

/* ---------- about ---------- */
.about { background:var(--soft) }
.about-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:96px; align-items:center }
.brand-panel { display:flex; flex-direction:column; align-items:center; gap:26px }
.about-logo { width:255px; height:255px; border-radius:16px; box-shadow:var(--shadow-md) }
.inception-badge { width:240px; height:auto; object-fit:contain }
.about p:not(.eyebrow) { font-size:.97rem; color:var(--muted) }
.about h2 { margin-bottom:22px }
.text-link {
  display:inline-flex; align-items:center; gap:12px;
  font-size:.9rem; font-weight:650; text-decoration:none;
  border-bottom:1px solid currentColor; padding-block:5px; transition:color .15s
}
.text-link .arrow { display:inline-block; transition:transform .18s }
.text-link:hover { color:var(--teal) }
.text-link:hover .arrow { transform:translate(2px,-2px) }

/* ---------- sections & cards ---------- */
.section-heading { max-width:660px; margin:0 auto 52px; text-align:center }
.section-heading .eyebrow { justify-content:center }
.section-heading .eyebrow:before { display:none }
.section-heading p:last-child { color:var(--muted); margin-bottom:0 }
.section-heading h2 { margin-bottom:18px }
/* product cards (Solutions) */
.product-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:32px }
.product-card {
  position:relative; display:flex; flex-direction:column; align-items:flex-start;
  padding:38px; border:1px solid var(--line); border-radius:var(--radius);
  background:#fff; box-shadow:var(--shadow-sm);
  transition:transform .22s, box-shadow .22s, border-color .22s
}
.product-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:#c3d5cd }
.product-top { display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%; margin-bottom:26px }
.status-badge {
  font-family:var(--mono); font-size:.62rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--teal); background:rgba(11,85,80,.07); border:1px solid rgba(11,85,80,.28);
  padding:7px 13px; border-radius:999px; line-height:1.45
}
.product-index { font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; color:var(--muted) }
.product-card :is(h2,h3) { font-size:1.62rem; letter-spacing:-.02em; margin-bottom:8px }
.product-brand { color:var(--muted); font-weight:500 }
.product-tag { font-family:var(--mono); font-size:.68rem; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--teal); margin-bottom:22px }
.product-headline { font-size:1.07rem; font-weight:600; line-height:1.5; letter-spacing:-.005em; margin-bottom:14px }
.product-text { font-size:.92rem; color:var(--muted); margin-bottom:28px }
.product-card .text-link { margin-top:auto }

/* shared capability band (Private Document Intelligence) */
.capability-band { background:var(--soft); border-block:1px solid var(--line) }
.capability-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:88px; align-items:start }
.capability-grid h2 { margin-bottom:0 }
.capability-text { font-size:1.02rem; margin-bottom:28px }

/* Advanced R&D strip */
.rnd-strip { background:linear-gradient(160deg,var(--abyss),var(--deep) 70%); color:#e4f0ea }
.rnd-strip .eyebrow { color:var(--teal-glow) }
.rnd-strip .eyebrow:before { background:var(--teal-glow) }
.rnd-strip .section-heading h2 { color:#fff }
.rnd-strip .section-heading p:last-child { color:#a9c4bc }
.rnd-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px }
.rnd-card {
  padding:30px; border:1px solid rgba(255,255,255,.14); border-radius:var(--radius);
  background:rgba(255,255,255,.05);
  transition:transform .2s, background .2s, border-color .2s
}
.rnd-card:hover { transform:translateY(-3px); background:rgba(255,255,255,.09); border-color:rgba(255,255,255,.26) }
.rnd-card .status-badge { color:#8fd8cd; background:rgba(143,216,205,.08); border-color:rgba(143,216,205,.35) }
.rnd-card h3 { color:#fff; font-size:1.22rem; margin:22px 0 12px }
.rnd-card p { font-size:.88rem; color:#c4d8d0; margin-bottom:0 }
.rnd-cta { text-align:center; margin:46px 0 0 }
.gallery-section { background:var(--soft) }
.pillar-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:30px }
.pillar-card {
  overflow:hidden; border:1px solid var(--line); border-radius:var(--radius);
  background:#fff; box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column;
  transition:transform .22s, box-shadow .22s, border-color .22s
}
.pillar-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:#c3d5cd }
.pillar-media { overflow:hidden }
.pillar-image { width:100%; height:auto; aspect-ratio:1216/768; object-fit:cover; transition:transform .8s cubic-bezier(.22,1,.36,1) }
.pillar-card:hover .pillar-image { transform:scale(1.045) }
.pillar-copy { padding:26px 30px 30px; display:flex; flex-direction:column; align-items:flex-start; flex:1 }
.pillar-copy h3 { font-size:1.28rem; letter-spacing:-.015em; margin-bottom:6px }
.pillar-copy .product-tag { margin-bottom:14px }
.pillar-copy p:not(.product-tag) { font-size:.9rem; color:var(--muted); margin-bottom:20px }
.pillar-copy .text-link { margin-top:auto }

/* ---------- footer ---------- */
.site-footer { background:var(--deep); color:#dbe9e3; padding-top:76px; position:relative }
.site-footer:before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(23,161,147,.55),transparent)
}
.footer-grid { display:grid; grid-template-columns:1.15fr 1fr 1fr; gap:64px; padding-bottom:54px }
.site-footer h2 { font-size:1.8rem; margin-bottom:18px; letter-spacing:-.02em }
.site-footer h3 { font-size:.78rem; font-family:var(--mono); text-transform:uppercase; letter-spacing:.2em; color:#8fd8cd; margin-bottom:22px }
.site-footer p,.site-footer a { font-size:.88rem; line-height:1.85 }
.site-footer a { display:block; overflow-wrap:anywhere; text-decoration:none; margin-bottom:6px; opacity:.85; transition:opacity .15s }
.site-footer a:hover { opacity:1 }
.site-footer .text-link { display:inline-flex; margin-top:14px; opacity:1 }
.site-footer .socials a { font-size:1.2rem }
.footer-brand { font-size:1.25rem!important; font-weight:700; letter-spacing:-.01em; margin-top:30px }
.footer-bottom {
  border-top:1px solid rgba(255,255,255,.12); padding:26px 0 32px;
  display:flex; justify-content:space-between; gap:30px;
  font-size:.68rem; line-height:1.7; color:#a9c4bc
}
.footer-bottom span:last-child { max-width:430px }

/* ---------- whatsapp float ---------- */
.whatsapp {
  position:fixed; bottom:22px; right:22px; width:54px; height:54px;
  display:grid; place-items:center;
  background:#178849; border:2px solid #fff; color:#fff; border-radius:50%;
  z-index:60; box-shadow:0 6px 24px rgba(0,30,38,.3); transition:transform .18s, background .18s
}
.whatsapp:hover { background:#116c39; transform:translateY(-3px) }
.whatsapp svg { width:30px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }

/* ---------- inner pages ---------- */
.page-intro { background:linear-gradient(180deg,var(--soft),#e9f1ec); padding:84px 0; text-align:center; border-bottom:1px solid var(--line) }
.page-intro .eyebrow { justify-content:center }
.page-intro .eyebrow:before { display:none }
.page-intro h1 { margin-bottom:22px }
.page-intro p:last-child { max-width:680px; margin:0 auto; color:var(--muted) }
.contact-band { background:linear-gradient(120deg,#e4efe9,#eef5f0); padding:68px 0; border-block:1px solid var(--line) }
.contact-band>.container { display:flex; align-items:center; gap:64px; justify-content:space-between }
.contact-band h2 { font-size:1.85rem; max-width:700px; margin:0 }
.contact-band .button { white-space:nowrap }
.contact-hero {
  background:linear-gradient(90deg,rgba(4,46,48,.94),rgba(4,46,48,.55)),url('/assets/contact.jpg') center 42%/cover;
  color:#fff; padding:96px 0
}
.contact-hero .eyebrow { color:#8fd8cd }
.contact-hero .eyebrow:before { background:#8fd8cd }
.contact-hero h1 { margin-bottom:20px }
.contact-hero p { max-width:560px; margin:0; color:#d9eae4 }
.contact-grid { display:grid; grid-template-columns:1fr 1fr; gap:88px }
.contact-details h2 { font-size:2.2rem; max-width:420px; margin-bottom:30px }
.contact-details a { overflow-wrap:anywhere; font-size:.95rem; line-height:2 }
.contact-details a:hover { color:var(--teal) }
.contact-details p { color:var(--muted); font-size:.95rem }
.detail-grid { margin-top:44px; display:grid; grid-template-columns:1.4fr 1fr; gap:26px }
.detail-grid h3 { font-size:.78rem; font-family:var(--mono); text-transform:uppercase; letter-spacing:.2em; color:var(--teal) }
.detail-grid p { margin-bottom:0 }

/* ---------- form ---------- */
form { display:flex; flex-direction:column }
form label { font-size:.82rem; font-weight:600; margin:0 0 9px; letter-spacing:.01em }
form input,form textarea {
  width:100%; border:1px solid #b3c4bc; border-radius:8px; background:#fbfdfc;
  padding:14px 15px; margin:0 0 22px; color:var(--ink);
  transition:border-color .15s, box-shadow .15s
}
form input:focus,form textarea:focus { border-color:var(--teal); box-shadow:0 0 0 4px rgba(11,85,80,.12); outline:none }
form textarea { resize:vertical; min-height:140px }
.form-note { font-size:.78rem; color:var(--muted); margin-top:-8px }
.form-note+button { align-self:flex-start }
#form-status { font-size:.84rem; color:var(--teal); margin:16px 0 0 }

/* ---------- projects ---------- */
.projects-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px }
.project-lead { padding:56px 0 0 }
.project-lead .project-note { margin-bottom:0; text-align:center; max-width:640px; margin-inline:auto }
.project-note { font-size:.85rem; color:var(--muted) }
.project-section { padding:76px 0 }
.project-section-alt { background:var(--soft); border-block:1px solid var(--line) }
.project-card {
  position:relative; padding:30px; border:1px solid var(--line); border-radius:var(--radius);
  background:#fff; display:flex; flex-direction:column; align-items:flex-start;
  box-shadow:var(--shadow-sm); transition:transform .2s, box-shadow .2s, border-color .2s
}
.project-card:hover { transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:#bcd2c9 }
.project-card .product-top { margin-bottom:22px }
.project-number { font-family:var(--mono); font-size:.72rem; letter-spacing:.16em; color:var(--muted) }
.project-card h3 { font-size:1.28rem; line-height:1.3; letter-spacing:-.015em; margin-bottom:12px }
.project-card p { font-size:.9rem; color:var(--muted); margin-bottom:24px }
.project-card .text-link { margin-top:auto }
.not-found { min-height:52vh; text-align:center }

/* ---------- responsive ---------- */
@media(min-width:1400px) {
  .hero-content { padding-top:130px; padding-bottom:104px }
}
@media(max-width:1000px) {
  .about-grid { gap:52px }
  .header-inner { gap:26px }
  #main-nav { gap:20px }
  .header-tools { gap:20px }
  .sector-grid { grid-template-columns:repeat(2,1fr); gap:15px }
  .sector-card { padding:23px 20px }
  .contact-grid { gap:52px }
  .footer-grid { gap:34px }
  .projects-grid { grid-template-columns:repeat(2,1fr) }
  .capability-grid { grid-template-columns:1fr; gap:36px }
  .rnd-grid { grid-template-columns:1fr; max-width:640px; margin-inline:auto }
}
/* Switch the longer wordmark/navigation to a menu before they collide. */
@media(min-width:761px) and (max-width:1024px) {
  .header-inner { gap:24px }
  .brand-name small { display:none }
  .header-tools .socials { display:none }
  .menu-toggle { display:none; align-items:center; gap:10px; background:none; border:0; padding:12px 0; font-size:.9rem; color:var(--ink); order:3 }
  #main-nav { flex-direction:column; align-items:stretch; padding:16px 32px; gap:4px; background:var(--paper) }
  .js .menu-toggle { display:flex }
  .js #main-nav { display:none; position:absolute; top:100%; left:0; right:0 }
  .js #main-nav.is-open { display:flex }
  html:not(.js) .header-inner { height:auto; flex-wrap:wrap; padding-block:16px }
  html:not(.js) #main-nav { order:4; flex-basis:100% }
  #main-nav a { padding:13px 5px }
  #main-nav a:after { display:none }
}
@media(max-width:760px) {
  .container { width:calc(100% - 40px) }
  .section { padding:64px 0 }
  .announcement { font-size:.66rem; padding:9px 20px }
  .header-inner { height:78px; gap:20px }
  .brand img { width:48px; height:48px }
  .brand-name { font-size:.98rem }
  .brand-name small { display:none }
  .menu-toggle { display:none; align-items:center; gap:10px; background:none; border:0; padding:12px 0; font-size:.8rem; color:var(--ink); order:3 }
  .header-tools { gap:0 }
  .header-tools .socials { display:none }
  #main-nav {
    display:flex; position:static; top:100%; left:0; right:0;
    background:#fff; box-shadow:0 12px 24px rgba(0,27,32,.08);
    padding:16px 20px; flex-direction:column; align-items:stretch; gap:4px
  }
  .js .menu-toggle { display:flex }
  .js #main-nav { display:none; position:absolute }
  .js #main-nav.is-open { display:flex }
  html:not(.js) .header-inner { height:auto; flex-wrap:wrap; padding-block:16px }
  html:not(.js) #main-nav { order:4; flex-basis:100%; box-shadow:none }
  #main-nav a { padding:13px 5px }
  #main-nav a:after { display:none }
  #main-nav a[aria-current] { font-weight:700 }
  .hero-content { padding-top:72px; padding-bottom:64px }
  .hero h1 { font-size:2.25rem; line-height:1.1; max-width:560px }
  .hero-intro { font-size:.96rem }
  .sector-grid { grid-template-columns:1fr; margin-top:48px; gap:12px }
  .sector-card { padding:20px 24px }
  .sector-number { float:right }
  .sector-card h2 { margin-top:0; font-size:1.24rem }
  .sector-card p { max-width:520px }
  .video-toggle { font-size:.6rem }
  .about-grid { grid-template-columns:1fr; gap:40px }
  .brand-panel { flex-direction:row; justify-content:center; gap:28px }
  .about-logo { width:150px; height:150px }
  .inception-badge { width:155px }
  .about h2 { max-width:520px }
  .product-grid { grid-template-columns:1fr; gap:26px }
  .product-card { padding:28px }
  .product-top { flex-wrap:wrap }
  .section-heading { margin-bottom:34px }
  .pillar-grid { grid-template-columns:1fr; gap:20px }
  .footer-grid { grid-template-columns:1fr 1fr; gap:32px }
  .footer-grid>div:first-child { grid-column:1/-1; max-width:440px }
  .site-footer { padding-top:52px }
  .footer-brand { margin-top:20px }
  .footer-bottom { flex-direction:column; gap:12px; padding-right:45px }
  .page-intro { padding:60px 0 }
  .contact-band>.container { flex-direction:column; align-items:flex-start; gap:30px }
  .contact-band h2 { font-size:1.6rem }
  .contact-hero { padding:64px 0 }
  .contact-grid { grid-template-columns:1fr; gap:42px }
  .contact-details h2 { font-size:2rem }
  .detail-grid { margin-top:32px }
  .projects-grid { grid-template-columns:1fr; gap:16px }
  .project-card { padding:24px }
  .whatsapp { width:48px; height:48px; right:15px; bottom:15px }
}
@media(max-width:440px) {
  .hero h1 { font-size:1.95rem }
  .brand-panel { gap:20px }
  .about-logo { width:135px; height:135px }
  .inception-badge { width:145px }
  .projects-grid,.footer-grid { grid-template-columns:1fr }
  .footer-grid>div:first-child { grid-column:auto }
  .header-inner { gap:18px }
}
@media(max-width:380px) {
  .brand-name { display:none }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important
  }
  .reveal { translate:none!important }
  .sector-card:hover,.product-card:hover,.project-card:hover,.rnd-card:hover,.pillar-card:hover,
  .button:hover,.button:hover .arrow,.text-link:hover .arrow,.whatsapp:hover { transform:none }
}
@media(max-width:760px) {
  .brand-panel .about-logo { max-width:44%; height:auto; aspect-ratio:1 }
  .brand-panel .inception-badge { max-width:48% }
}

/* Let long translated labels wrap within their grid tracks. */
.product-card,.project-card,.rnd-card { min-width:0 }
.status-badge { max-width:100%; overflow-wrap:anywhere }

/* Product navigation and detail pages extend the approved Kimi components. */
.card-title { color: inherit; text-decoration: none; }
.card-title:hover { color: var(--teal, #0d6861); text-decoration: underline; text-underline-offset: .2em; }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:.65rem; font-size:.85rem; margin-bottom:2.5rem; text-align:left; }
.detail-hero { text-align:left; }
.detail-hero.has-image { display:grid; grid-template-columns:1.1fr 1fr; gap:3rem; align-items:center; }
.detail-hero h1 { font-size:clamp(2.3rem,4.4vw,4rem); margin:1.1rem 0; }
.detail-hero p { margin-left:0; }
.detail-hero figure { margin:0; min-width:0; }
.detail-hero img { width:100%; height:auto; border-radius:18px; }
.detail-hero figcaption { font-size:.75rem; color:#526763; margin-top:.7rem; }
.detail-actions { display:flex; flex-wrap:wrap; gap:1.25rem; align-items:center; margin-top:2rem; }
.detail-overview { display:grid; grid-template-columns:1.2fr 1fr; gap:4rem; align-items:start; }
.scope-panel { background:#edf4f1; border:1px solid #dbe7e1; border-radius:14px; padding:1.8rem; }
.scope-panel p:last-child { margin-bottom:0; }
.section-tint { background:#f5f8f6; }
.workflow-grid { list-style:none; padding:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem; }
.workflow-grid li { padding:1.75rem; background:white; border:1px solid #dce7e2; border-radius:14px; }
.workflow-grid h3 { font-size:1.12rem; margin-top:1rem; }
.step-number { color:#3c716b; font-family:monospace; }
.capability-list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; padding-left:1.2rem; margin-top:2rem; }
.capability-list li { padding-right:1.5rem; }
.plan-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem; }
.plan-card { display:flex; flex-direction:column; min-width:0; padding:1.6rem; border:1px solid #d4e2dc; border-radius:16px; background:white; }
.plan-card h3 { font-size:1.35rem; }
.plan-card p { flex:1; margin:1rem 0 2rem; }
.plan-card .button { text-align:center; white-space:normal; }
.plan-footer { margin-top:2rem; text-align:center; }
.access-steps { padding-left:1.4rem; }
.access-steps li { margin:1.2rem 0; padding-left:.4rem; }
.product-faq details { border-bottom:1px solid #dbe5df; padding:1.2rem 0; }
.product-faq summary { cursor:pointer; font-weight:600; }
.product-faq details p { margin:1rem 0 0; }
.pricing-row { display:grid; grid-template-columns:1.7fr 1fr; align-items:center; gap:3rem; padding:2.5rem 0; border-bottom:1px solid #d9e4de; }
.pricing-row h2 { margin-top:1rem; font-size:1.6rem; }
select { display:block; width:100%; padding:1rem; border:1px solid #cbdad4; border-radius:8px; background:white; color:#183c37; font:inherit; margin-bottom:1.25rem; }
#contact-form option[hidden] { display:none; }
@media (max-width:1024px) { .detail-hero.has-image { gap:2rem; } .detail-overview { gap:2rem; } }
@media (max-width:760px) {
  .detail-hero.has-image,.detail-overview,.workflow-grid,.capability-list,.pricing-row { grid-template-columns:1fr; }
  .detail-hero figure { max-width:520px; }
  .pricing-row { gap:1rem; }
  .workflow-grid,.capability-list { gap:1rem; }
  .detail-actions .button { white-space:normal; }
}
.plan-card .button-outline,.pricing-row .button-outline { color:#16453e; border-color:#71958a; background:transparent; }
.plan-card .button-outline:hover,.pricing-row .button-outline:hover { color:#fff; background:#16453e; border-color:#16453e; }

.plan-grid-4 { grid-template-columns:repeat(4,minmax(0,1fr)); }
.plan-card .button { padding-inline:1rem; }
@media (max-width:1024px) { .plan-grid,.plan-grid-4 { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) { .plan-grid,.plan-grid-4 { grid-template-columns:1fr; } }