/* =========================================================
   INNOVIX — design tokens
   Palette pulled directly from the brand mark:
   navy (authority) / teal (motion, technology) / gold (the
   single bright point the mark's trail launches toward).
   ========================================================= */
:root {
  --navy: #011D55;
  --navy-deep: #010F30;
  --teal: #019AAF;
  --teal-soft: #E9F6F8;
  --gold: #E6A715;
  --ink: #1E2430;
  --ink-soft: #5B6472;
  --paper: #FBFBFA;
  --paper-line: #E4E7EB;
  --card-line: #DCE6E9;

  --display: 'Poppins', sans-serif;
  --body: 'Inter', sans-serif;

  --container: 1180px;
  --radius: 6px;

  /* The mark's stroke runs at ~22° off vertical — reused as the
     site's one recurring structural angle for section dividers. */
  --cut: 22deg;
}

* { box-sizing: border-box; }

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gold);
  color: var(--navy-deep);
  font-family: var(--body);
  font-weight: 600;
  padding: 12px 22px;
  z-index: 1000;
  border-radius: 0 0 6px 0;
}
.skip-link:focus {
  left: 0;
}
html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

body {
  margin: 0;
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  color: var(--navy);
  margin: 0;
  line-height: 1.15;
}

p { margin: 0 0 1em; color: var(--ink-soft); text-align: justify; text-justify: inter-word; }
.section-head--center p, .tl-step p, .closing p { text-align: center; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
ul { margin: 0; padding: 0; list-style: none; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

.eyebrow {
  display: inline-block;
  font-family: var(--body);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 14px;
}

.section {
  padding: 64px 0;
}
.section--tight { padding: 88px 0; }
.section--soft { background: var(--teal-soft); }
.section--navy { background: var(--navy); color: #fff; }
.section--navy h2, .section--navy h3 { color: #fff; }
.section--navy p { color: #C7D3E0; }

.section-head {
  max-width: 640px;
  margin-bottom: 56px;
}
.section-head--center { max-width: 680px; margin-left: auto; margin-right: auto; text-align: center; }
.section-head h2 { font-size: clamp(28px, 3.4vw, 38px); font-weight: 700; letter-spacing: -0.01em; }
.section-head p { margin-top: 16px; font-size: 17px; }

/* focus visibility */
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

/* ---------------- Buttons ---------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: var(--radius);
  font-family: var(--body);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--gold); color: var(--navy-deep); }
.btn--primary:hover { background: #f0b429; }
.btn--ghost { border-color: rgba(255,255,255,0.35); color: #fff; }
.btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,0.06); }
.btn--outline { border-color: var(--navy); color: var(--navy); }
.btn--outline:hover { background: var(--navy); color: #fff; }
.btn--whatsapp { background: #25D366; color: #fff; }
.btn--whatsapp:hover { background: #1fb757; }
.btn--whatsapp img { width: 20px; height: 20px; }

.whatsapp-float {
  position: fixed;
  right: 26px;
  bottom: 26px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 24px rgba(1, 15, 48, 0.35);
  z-index: 90;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.whatsapp-float:hover { transform: scale(1.08); box-shadow: 0 10px 30px rgba(1, 15, 48, 0.45); }
.whatsapp-float img { width: 32px; height: 32px; }
@media (max-width: 560px) {
  .whatsapp-float { right: 18px; bottom: 18px; width: 52px; height: 52px; }
  .whatsapp-float img { width: 28px; height: 28px; }
}

/* ---------------- Nav ---------------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 8px 0;
  background: rgba(251, 251, 250, 0.97);
  box-shadow: 0 2px 18px rgba(1, 15, 48, 0.08);
  transition: padding 0.25s ease, box-shadow 0.25s ease;
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; }
.nav__logo { height: 78px; }
.nav__links { display: flex; gap: 34px; align-items: center; }
.nav__links a {
  font-size: 14.5px; font-weight: 500; color: var(--navy);
  position: relative; padding-bottom: 4px;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 2px; background: var(--gold);
  transition: right 0.22s ease;
}
.nav__links a:hover::after { right: 0; }
.nav__links a:hover { color: var(--teal); }
.nav .btn--outline { padding: 10px 20px; font-size: 14px; }

.nav.is-scrolled {
  padding: 10px 0;
  box-shadow: 0 6px 24px rgba(1,15,48,0.14);
}

.nav__toggle { display: none; }

@media (max-width: 880px) {
  .nav__links { position: fixed; top: 0; right: -100%; height: 100vh; width: 78%; max-width: 320px;
    background: var(--paper); box-shadow: -8px 0 30px rgba(1,15,48,0.12);
    flex-direction: column; justify-content: center; align-items: flex-start;
    padding: 40px; transition: right 0.3s ease; gap: 26px; }
  .nav__links.is-open { right: 0; }
  .nav__links .btn--outline { border-color: var(--navy); color: var(--navy); }
  .nav__toggle { display: flex; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; z-index: 110; padding: 6px; }
  .nav__toggle span { width: 24px; height: 2px; background: var(--navy); display: block; }
}

/* ---------------- Hero ---------------- */
.hero {
  position: relative;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  color: #fff;
  padding: 190px 0 140px;
  overflow: hidden;
}
.hero__grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 40px;
  align-items: center;
  position: relative;
  z-index: 2;
}
.hero__eyebrow { color: var(--gold); }
.hero h1 {
  color: #fff;
  font-size: clamp(38px, 5.4vw, 62px);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: 22px;
}
.hero h1 span { color: var(--teal); }
.hero__lead { color: #C7D3E0; font-size: 18.5px; max-width: 520px; margin-bottom: 36px; }
.hero__actions { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 56px; }
.hero__facts { display: flex; gap: 40px; flex-wrap: wrap; border-top: 1px solid rgba(255,255,255,0.15); padding-top: 28px; }
.hero__fact-label { font-size: 13px; color: #91A0B5; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }
.hero__fact-value { font-family: var(--display); font-weight: 600; font-size: 16px; color: #fff; }

.hero__art { position: relative; display: flex; align-items: center; justify-content: center; }
.hero__art-inner { position: relative; display: inline-flex; align-items: center; justify-content: center; }

/* ---------------- Technology orbit ---------------- */
/* Slot positions use plain, fully-literal transform values (rotate +
   translateY combined in one declaration, repeated per breakpoint) rather
   than a CSS custom property inside calc() inside transform. That specific
   combination has documented, version-dependent inconsistent support in
   Safari - this sandbox has no way to test real Safari/iOS directly, so
   rather than ship a pattern with a known compatibility question mark,
   this uses only the most widely and consistently supported transform
   syntax across every browser, at the cost of writing the numbers out
   three times instead of once. */
.tech-orbit {
  position: absolute; top: 50%; left: 50%; width: 0; height: 0; z-index: 1;
  animation: orbit-spin 24s linear infinite;
}
@keyframes orbit-spin { from { transform: translate(-50%,-50%) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(360deg); } }

.tech-orbit__ring { position: absolute; top: 50%; left: 50%; width: 480px; height: 480px; border: 1.5px dashed rgba(255,255,255,0.18); border-radius: 50%; transform: translate(-50%,-50%); }

.tech-orbit__slot { position: absolute; top: 0; left: 0; width: 0; height: 0; }
.tech-orbit__slot--0   { transform: rotate(0deg)   translateY(-240px); }
.tech-orbit__slot--60  { transform: rotate(60deg)  translateY(-240px); }
.tech-orbit__slot--120 { transform: rotate(120deg) translateY(-240px); }
.tech-orbit__slot--180 { transform: rotate(180deg) translateY(-240px); }
.tech-orbit__slot--240 { transform: rotate(240deg) translateY(-240px); }
.tech-orbit__slot--300 { transform: rotate(300deg) translateY(-240px); }

.tech-orbit__icon {
  position: absolute; top: 0; left: 0; transform: translate(-50%,-50%);
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  animation: counter0 24s linear infinite; /* overridden per-icon via inline animation-name */
}
.tech-orbit__icon img { width: 42px; height: 42px; max-width: none; padding: 10px; background: #fff; border-radius: 50%; box-shadow: 0 6px 18px rgba(1,15,48,0.3); }
.tech-orbit__icon span { font-size: 13px; font-weight: 700; color: #fff; background: rgba(1,15,48,0.65); padding: 3px 10px; border-radius: 8px; white-space: nowrap; }

@keyframes counter0   { from { transform: translate(-50%,-50%) rotate(0deg);    } to { transform: translate(-50%,-50%) rotate(-360deg); } }
@keyframes counter60  { from { transform: translate(-50%,-50%) rotate(-60deg);  } to { transform: translate(-50%,-50%) rotate(-420deg); } }
@keyframes counter120 { from { transform: translate(-50%,-50%) rotate(-120deg); } to { transform: translate(-50%,-50%) rotate(-480deg); } }
@keyframes counter180 { from { transform: translate(-50%,-50%) rotate(-180deg); } to { transform: translate(-50%,-50%) rotate(-540deg); } }
@keyframes counter240 { from { transform: translate(-50%,-50%) rotate(-240deg); } to { transform: translate(-50%,-50%) rotate(-600deg); } }
@keyframes counter300 { from { transform: translate(-50%,-50%) rotate(-300deg); } to { transform: translate(-50%,-50%) rotate(-660deg); } }

@media (max-width: 980px) {
  .tech-orbit__ring { width: 420px; height: 420px; }
  .tech-orbit__slot--0   { transform: rotate(0deg)   translateY(-235px); }
  .tech-orbit__slot--60  { transform: rotate(60deg)  translateY(-235px); }
  .tech-orbit__slot--120 { transform: rotate(120deg) translateY(-235px); }
  .tech-orbit__slot--180 { transform: rotate(180deg) translateY(-235px); }
  .tech-orbit__slot--240 { transform: rotate(240deg) translateY(-235px); }
  .tech-orbit__slot--300 { transform: rotate(300deg) translateY(-235px); }
  .tech-orbit__icon img { width: 34px; height: 34px; max-width: none; padding: 8px; }
  .tech-orbit__icon span { font-size: 11.5px; padding: 2px 8px; }
}
@media (max-width: 560px) {
  .tech-orbit__icon img { width: 28px; height: 28px; max-width: none; padding: 6px; }
  .tech-orbit__icon span { font-size: 9.5px; padding: 1px 6px; }
}

.hero__mark-plate {
  background: var(--paper);
  border-radius: 22px;
  padding: 16px;
  box-shadow: 0 24px 60px rgba(1, 15, 48, 0.35);
  display: inline-flex;
  opacity: 0;
  transform: scale(0.92) translateY(8px);
  animation: mark-in 0.9s cubic-bezier(.22,1,.36,1) 0.25s forwards;
}
@media (min-width: 981px) {
  .hero__art-inner { margin-top: -210px; }
}
.hero__mark { width: 100%; max-width: 220px; display: block; }
@keyframes mark-in { to { opacity: 1; transform: scale(1) translateY(0); } }

/* diagonal cut into next section, angle echoes the mark's stroke */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px; height: 90px;
  background: var(--paper);
  clip-path: polygon(0 100%, 100% 100%, 100% 40%, 0 100%);
}

/* ---------------- Reveal on scroll ---------------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ---------------- Fact strip (About) ---------------- */
.fact-strip {
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 56px;
}
.fact {
  flex: 1 1 200px;
  padding: 26px 24px;
  border-right: 1px solid var(--card-line);
  border-bottom: 1px solid var(--card-line);
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.fact:last-child { border-right: none; }
.fact__icon { width: 30px; height: 30px; flex-shrink: 0; margin-top: 2px; }
.fact__label { font-size: 12.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); margin-bottom: 3px; }
.fact__value { font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--navy); }

.about__body { max-width: 760px; }
.about__body p { font-size: 16.5px; }

/* ---------------- Philosophy (3 col) ---------------- */
.philo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; align-items: start; }
.philo {
  padding-top: 22px;
  border-top: 2px solid var(--teal);
}
.philo__icon { width: 40px; height: 40px; margin-bottom: 18px; }
.philo h3 { font-size: 20px; margin-bottom: 10px; }
.philo p { font-size: 15px; margin: 0; }

/* ---------------- Capability panels (2x2) ---------------- */
.cap-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: start; }
.cap-panel {
  background: #fff;
  border: 1px solid var(--card-line);
  padding: 38px 36px;
  position: relative;
  min-height: 380px;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.cap-panel:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(1,29,85,0.10);
  border-color: var(--teal);
}
.cap-panel__head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.cap-panel__icon {
  width: 52px; height: 52px; flex-shrink: 0;
  background: var(--teal-soft); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.cap-panel__icon img { width: 28px; height: 28px; }
.cap-panel h3 { font-size: 21px; }
.cap-panel p { font-size: 15px; margin-bottom: 18px; }
.cap-panel ul li {
  font-size: 14.5px; color: var(--ink); padding: 7px 0 7px 20px; position: relative;
  border-top: 1px solid var(--paper-line);
}
.cap-panel ul li:first-child { border-top: none; }
.cap-panel ul li::before {
  content: ""; position: absolute; left: 0; top: 16px; width: 7px; height: 7px; background: var(--teal); border-radius: 1px;
}

/* ---------------- Industries grid ---------------- */
/* ---------------- Technologies (tabbed) ---------------- */
.tech-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; border-bottom: 1px solid var(--card-line); padding-bottom: 24px; }
.tech-tab {
  font-family: var(--display); font-weight: 600; font-size: 13.5px; color: var(--ink-soft);
  background: #fff; border: 1px solid var(--card-line); border-radius: 22px; padding: 11px 22px;
  cursor: pointer; transition: all 0.15s ease;
}
.tech-tab:hover { border-color: var(--teal); color: var(--navy); }
.tech-tab.active { background: var(--navy); border-color: var(--navy); color: #fff; }
.tech-panel { display: none; }
.tech-panel.active { display: block; animation: tech-fade 0.3s ease; }
@keyframes tech-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.tech-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; align-items: start; }
.tech-item {
  background: #fff; border: 1px solid var(--card-line); border-top: 3px solid var(--teal); border-radius: 6px;
  padding: 22px 18px; text-align: center; font-family: var(--display); font-weight: 600; font-size: 15px; color: var(--navy);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tech-item:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(1,29,85,0.10); }
@media (max-width: 700px) {
  .tech-grid { grid-template-columns: repeat(2, 1fr); }
}

.industry-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; align-items: start; }
.industry {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px;
  background: #fff;
  border: 1px solid var(--card-line);
  border-radius: var(--radius);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.industry:hover { border-color: var(--teal); transform: translateY(-2px); }
.industry img { width: 26px; height: 26px; flex-shrink: 0; }
.industry span { font-family: var(--display); font-weight: 600; font-size: 14.5px; color: var(--navy); }

/* ---------------- Delivery timeline ---------------- */
.timeline { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin-top: 20px; align-items: start; }
.timeline::before {
  content: ""; position: absolute; top: 34px; left: 8%; right: 8%; height: 2px; background: var(--card-line);
}
.tl-step { position: relative; text-align: center; padding-top: 0; }
.tl-step__num {
  width: 68px; height: 68px; border-radius: 50%; background: #fff; border: 2px solid var(--teal);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; position: relative; z-index: 2;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tl-step:hover .tl-step__num { transform: scale(1.08); box-shadow: 0 10px 22px rgba(1,29,85,0.14); }
.tl-step__num img { width: 30px; height: 30px; }
.tl-step__badge {
  position: absolute; top: -6px; right: -2px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--navy); color: #fff; font-size: 11px; font-weight: 700; font-family: var(--display);
  display: flex; align-items: center; justify-content: center;
}
.tl-step h4 { font-size: 15.5px; margin-bottom: 6px; }
.tl-step p { font-size: 13px; margin: 0; }

/* ---------------- Selected Work (case studies) ---------------- */
/* Built as a repeatable card pattern - .work-grid can hold more than one
   .work-card as additional projects are added later, not just a one-off
   layout for a single case study. */
.work-grid { display: grid; gap: 28px; }
.work-card {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 0;
  background: #fff; border: 1px solid var(--card-line); border-radius: var(--radius);
  overflow: hidden; box-shadow: 0 2px 18px rgba(1, 15, 48, 0.06);
  transition: box-shadow 0.25s ease;
}
.work-card:hover { box-shadow: 0 16px 36px rgba(1,29,85,0.10); }
.work-card__media {
  position: relative; background: var(--teal-soft); padding: 32px 24px;
  display: flex; align-items: center; justify-content: center; gap: 16px; min-height: 320px;
}
.work-card__shot { border-radius: 8px; box-shadow: 0 10px 30px rgba(1,15,48,0.16); object-fit: cover; object-position: top; }
.work-card__shot--wide { width: 78%; aspect-ratio: 4/3; }
.work-card__shot--tall { display: none; }
.work-card__info { padding: 40px 40px 40px 36px; display: flex; flex-direction: column; gap: 14px; }
.work-card__status { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; padding: 5px 11px; border-radius: 20px; width: fit-content; }
.work-card__status--dev { background: #FFF3E0; color: #B36B00; }
.work-card__status--dev::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #E6A715; }
.work-card__tag { font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--teal); }
.work-card__info h3 { font-family: var(--display); font-size: 24px; font-weight: 700; color: var(--navy); }
.work-card__info > p { font-size: 15px; color: var(--ink-soft); line-height: 1.6; }
.work-card__points { list-style: none; display: flex; flex-direction: column; gap: 9px; margin: 4px 0; }
.work-card__points li { position: relative; padding-left: 20px; font-size: 14px; color: var(--ink); line-height: 1.5; }
.work-card__points li::before { content: ""; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; background: var(--teal); border-radius: 1px; }
.work-card__stack { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.work-card__stack span { background: var(--paper); border: 1px solid var(--card-line); border-radius: 22px; padding: 6px 14px; font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }

@media (min-width: 881px) {
  .work-card__shot--tall { display: block; width: 30%; aspect-ratio: 9/16; align-self: flex-end; }
  .work-card__shot--wide { align-self: flex-start; }
}
@media (max-width: 880px) {
  .work-card { grid-template-columns: 1fr; }
  .work-card__shot--wide { width: 100%; }
}

/* ---------------- Experience (team stat + text) ---------------- */
.leader-grid { display: grid; grid-template-columns: 260px 1fr; gap: 48px; align-items: start; }
.leader-grid p:last-child { margin-bottom: 0; }
.leader__stat {
  background: #fff; border: 1px solid var(--card-line); border-top: 3px solid var(--teal);
  padding: 32px 26px; text-align: left;
}
.leader__stat-num { font-family: var(--display); font-weight: 700; font-size: 56px; color: var(--navy); line-height: 1; margin-bottom: 14px; }
.leader__stat-label { font-size: 14px; color: var(--ink-soft); line-height: 1.5; }
.leader__quote {
  border-left: 3px solid var(--teal); padding-left: 20px; font-size: 18px; color: var(--navy);
  font-family: var(--display); font-weight: 500; margin-bottom: 20px; line-height: 1.5;
}
.leader p { font-size: 16px; }

/* ---------------- Why choose value cards ---------------- */
.value-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-bottom: 64px; align-items: start; }
.value-card {
  background: #fff; border: 1px solid var(--card-line); padding: 30px 26px; border-radius: 8px;
  min-height: 220px;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}
.value-card:hover { transform: translateY(-4px); box-shadow: 0 16px 32px rgba(1,29,85,0.10); border-color: var(--teal); }
.value-card__icon { width: 42px; height: 42px; margin-bottom: 16px; transition: transform 0.22s ease; }
.value-card:hover .value-card__icon { transform: scale(1.08); }
.value-card h3 { font-size: 17.5px; margin-bottom: 8px; }
.value-card p { font-size: 14px; margin: 0; }

.gain { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; padding-top: 48px; border-top: 1px solid var(--card-line); }
.gain__col h4 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--teal); margin-bottom: 20px; }
.gain__col li { font-size: 15.5px; padding: 10px 0 10px 24px; position: relative; border-top: 1px solid var(--paper-line); color: var(--ink); }
.gain__col li:first-child { border-top: none; }
.gain__col li::before { content: "▸"; position: absolute; left: 0; color: var(--teal); font-size: 13px; top: 11px; }

/* ---------------- Closing / CTA ---------------- */
.closing { text-align: center; padding: 150px 0; }
.closing__mark-plate {
  width: 84px; height: 84px; margin: 0 auto 28px;
  background: var(--paper); border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 12px 30px rgba(1, 15, 48, 0.3);
}
.closing__mark { width: 46px; height: 46px; margin: 0; }
.closing h2 { color: #fff; font-size: clamp(30px, 4vw, 44px); margin-bottom: 18px; }
.closing__rule { width: 64px; height: 2px; background: var(--gold); margin: 0 auto 22px; }
.closing p { color: #C7D3E0; font-size: 18px; max-width: 560px; margin: 0 auto 44px; }
.closing__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

/* ---------------- Footer ---------------- */
.footer { background: var(--navy-deep); color: #91A0B5; padding: 56px 0 30px; }
.footer__top { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 40px; padding-bottom: 36px; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 26px; }
.footer__col h5 { color: #fff; font-family: var(--display); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 16px; }
.footer__col ul li { margin-bottom: 10px; font-size: 14.5px; }
.footer__col a:hover { color: #fff; }
.footer__map-col { flex: 1 1 260px; max-width: 300px; }
.footer__top--simple { justify-content: space-between; gap: 60px; }
.footer__quote-col { max-width: 340px; padding-top: 21px; }
.footer__quote-mark { width: 26px; height: 26px; color: rgba(255,255,255,0.25); margin-bottom: 10px; }
.footer__quote-text { font-size: 14.5px; line-height: 1.6; color: #C7D3E0; font-style: italic; }
.footer__quote-attr { display: block; margin-top: 14px; font-family: var(--display); font-weight: 600; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--teal); }
.footer__map-caption { font-size: 13px; color: #91A0B5; margin: 12px 0 0; text-align: left; }
.footer__map {
  width: 100%; height: 140px; border-radius: 6px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12); filter: grayscale(0.25) brightness(0.92);
}
.footer__map iframe { width: 100%; height: 100%; border: 0; display: block; }
.footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 13px; }

/* ---------------- Responsive ---------------- */
@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__art { max-width: 260px; margin: 55px auto 0; order: -1; }
  .cap-grid { grid-template-columns: 1fr; }
  .philo-grid { grid-template-columns: 1fr; gap: 36px; }
  .leader-grid { grid-template-columns: 1fr; }
  .leader__stat { margin-bottom: 8px; }
  .value-grid { grid-template-columns: 1fr 1fr; }
  .gain { grid-template-columns: 1fr; gap: 32px; }
  .industry-grid { grid-template-columns: repeat(2, 1fr); }
  .timeline { grid-template-columns: repeat(3, 1fr); row-gap: 40px; }
  .timeline::before { display: none; }
  .fact-strip { flex-direction: column; }
  .fact { border-right: none; }
}
@media (max-width: 560px) {
  .section { padding: 56px 0; }
  .value-grid { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr 1fr; }
  .hero { padding: 150px 0 110px; }
  .hero__art { margin-top: 95px; }
  .industry-grid { grid-template-columns: 1fr; } /* 2 columns doesn't leave enough room for longer names like "Manufacturing" at this width - was causing real horizontal overflow */
}
@media (max-width: 480px) {
  /* A real iOS Safari screenshot showed the orbit both clipped at the
     left/right edges and overlapping the heading text below it - the
     470px orbit diameter was wider than the ~390px phone viewport itself.
     Shrinking the plate further here makes room for a genuinely smaller
     orbit that fits comfortably within the viewport width, with real
     margin verified by measurement, not just assumed. */
  .hero__art { max-width: 190px; }
  .hero__mark-plate { padding: 12px; border-radius: 18px; }
  .tech-orbit__ring { width: 330px; height: 330px; }
  .tech-orbit__slot--0   { transform: rotate(0deg)   translateY(-165px); }
  .tech-orbit__slot--60  { transform: rotate(60deg)  translateY(-165px); }
  .tech-orbit__slot--120 { transform: rotate(120deg) translateY(-165px); }
  .tech-orbit__slot--180 { transform: rotate(180deg) translateY(-165px); }
  .tech-orbit__slot--240 { transform: rotate(240deg) translateY(-165px); }
  .tech-orbit__slot--300 { transform: rotate(300deg) translateY(-165px); }
  .hero__art { margin-top: 80px; margin-bottom: 40px; }
}
@media (max-width: 360px) {
  .hero__art { max-width: 150px; }
  .hero__mark-plate { padding: 10px; border-radius: 15px; }
  .tech-orbit__ring { width: 270px; height: 270px; }
  .tech-orbit__slot--0   { transform: rotate(0deg)   translateY(-135px); }
  .tech-orbit__slot--60  { transform: rotate(60deg)  translateY(-135px); }
  .tech-orbit__slot--120 { transform: rotate(120deg) translateY(-135px); }
  .tech-orbit__slot--180 { transform: rotate(180deg) translateY(-135px); }
  .tech-orbit__slot--240 { transform: rotate(240deg) translateY(-135px); }
  .tech-orbit__slot--300 { transform: rotate(300deg) translateY(-135px); }
  .tech-orbit__icon img { width: 24px; height: 24px; max-width: none; padding: 5px; }
  .tech-orbit__icon span { font-size: 8.5px; padding: 1px 5px; }
}