/* WEB-10A/B — IDJ Platform premium industrial SaaS experience.
   Scoped exclusively to the corporate homepage and /ops product page.
   Static CSS only: no runtime dependencies, external fonts, or telemetry.
   Brand roles: IDJ navy/blue/teal; IgniOps amber remains product-specific.
*/
.web10-site {
  --web10-navy: #0b1f4b;
  --web10-dark: #071630;
  --web10-blue: #276cf5;
  --web10-blue-light: #8dccff;
  --web10-teal: #49ebdd;
  --web10-ink: #142343;
  --web10-subtle: #4c607c;
  --web10-surface: #f6f9fe;
  --web10-line: #dbe6f5;
  --web10-shadow: 0 24px 65px rgba(6, 34, 80, .11);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

/* Shared site header — visually cohesive with the dark hero. */
.web10-site .header-inner { border-bottom: 1px solid rgba(188, 221, 255, .19); }
.web10-site .brand { align-items: center; gap: 12px; }
.web10-site .brand-symbol { display: grid; place-items: center; }
.web10-site .brand-wordmark { letter-spacing: .045em; }
.web10-site .main-nav { gap: clamp(15px, 2.35vw, 32px); }
.web10-site .main-nav > a:not(.nav-cta) { color: #e0ecff; }
.web10-site .main-nav > a:not(.nav-cta):hover { color: #aeeaff; }
.web10-site .main-nav .nav-cta {
  background: #2266ed;
  border-color: #77a2ff;
  border-radius: 11px;
  padding-inline: 17px;
  color: #fff;
  box-shadow: 0 7px 26px rgba(0, 74, 197, .21);
}

/* A restrained luminous hero supports the existing video and real screenshots. */
.web10-site .hero {
  background: radial-gradient(ellipse at 79% 20%, rgba(31, 113, 250, .25), transparent 49%),
              radial-gradient(ellipse at 10% 83%, rgba(42, 214, 213, .09), transparent 43%),
              linear-gradient(124deg, #07142e 3%, #0b244e 66%, #101b40 100%) !important;
}
.web10-site .hero::before { opacity: .65; background-size: 66px 66px; }
.web10-site .hero-grid {
  gap: clamp(30px, 4.8vw, 68px);
  padding-top: 166px;
  padding-bottom: 94px;
}
.web10-site .hero-copy { min-width: 0; }
.web10-site .hero .eyebrow {
  display: inline-flex;
  max-width: 100%;
  padding: 8px 12px;
  background: rgba(38, 112, 203, .13);
  border: 1px solid rgba(142, 203, 255, .3);
  border-radius: 999px;
  color: #b9e9ff;
  letter-spacing: .07em;
  line-height: 1.55;
}
.web10-site .hero h1 {
  max-width: 690px;
  font-size: clamp(52px, 4.65vw, 72px);
  letter-spacing: -.052em;
  line-height: 1.08;
  text-wrap: balance;
  margin: 29px 0 25px;
}
.web10-site .hero h1 em { color: var(--web10-teal); }
.web10-site .hero-intro { max-width: 575px; color: #d2e0f3; font-size: 16.5px; line-height: 1.75; }
.web10-site .hero-intro strong { color: #fff; line-height: 1.5; }
.web10-site .hero-fit { gap: 10px; margin-top: 24px; }
.web10-site .hero-fit span {
  color: #dcecff;
  background: rgba(20, 60, 113, .63);
  border: 1px solid rgba(140, 191, 251, .35);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12px;
  line-height: 1.5;
}
.web10-site .hero-buttons { gap: 12px; margin-top: 30px; }
.web10-site .hero-buttons .button {
  min-height: 52px;
  border-radius: 12px;
  padding: 14px 20px;
  gap: 17px;
  font-size: 13px;
  letter-spacing: .004em;
}
.web10-site .hero-buttons .button-primary { background: #327bff; box-shadow: 0 14px 34px rgba(25, 91, 232, .30); }
.web10-site .hero-buttons .button-primary:hover { background: #1763ed; }
.web10-site .hero-buttons .button-outline { background: rgba(246, 251, 255, .06); border: 1px solid rgba(197, 224, 255, .5); }
.web10-site .hero-buttons .button-outline:hover { background: rgba(246, 251, 255, .13); }
.web10-site .hero-footnote { margin-top: 29px; color: #bcd1ea; line-height: 1.6; }
.web10-site .hero-art { min-width: 0; }
.web10-site .hero-motion-frame, .web10-site .ops-hero-shot {
  border: 1px solid #4e84c1;
  border-radius: 19px;
  background: #091c3f;
  box-shadow: 0 28px 78px rgba(0, 5, 23, .4), 0 0 0 7px rgba(178, 216, 255, .045);
}
.web10-site .hero-motion-caption, .web10-site .hero-proof-caption {
  color: #d0e3f6;
  font-size: 12px;
  line-height: 1.6;
  margin-top: 16px;
}
.web10-site .hero-motion-link { border-radius: 10px; background: #206ff4; }

/* Screenshot ribbon: useful context, no fake stats or logos. */
.web10-site .web10-preview-ribbon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 18px;
  min-height: 46px;
  padding: 11px 16px;
  background: #09264e;
  border-bottom: 1px solid rgba(178, 221, 255, .24);
  color: #d7e9ff;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .015em;
}
.web10-site .web10-preview-ribbon strong { color: #fff; font-weight: 800; }
.web10-site .web10-preview-ribbon span:last-child { color: #bfddf3; }
.web10-site .ops-hero-shot { text-decoration: none; }
.web10-site .ops-hero-shot img, .web10-site .portfolio-shot img { display: block; width: 100%; height: auto; }

/* A calmer, product-led portfolio presentation. */
.web10-site .principles { background: #102b54; border-top: 1px solid rgba(176, 215, 255, .17); }
.web10-site .section { padding-block: clamp(74px, 8.5vw, 110px); }
.web10-site .section-portfolio, .web10-site .section-product {
  background: linear-gradient(180deg, #fbfdff 0%, #f1f6fe 100%);
}
.web10-site .section-intro { align-items: end; gap: 25px; }
.web10-site .section-intro h2 { color: var(--web10-ink); letter-spacing: -.045em; text-wrap: balance; }
.web10-site .section-intro > p { max-width: 570px; color: var(--web10-subtle); line-height: 1.76; }
.web10-site .portfolio-grid { gap: 20px; }
.web10-site .portfolio-product {
  border-radius: 23px;
  background: radial-gradient(circle at 90% 11%, rgba(42, 119, 248, .23), transparent 46%),
              linear-gradient(129deg, #0a1c3b, #103563);
  border: 1px solid rgba(126, 171, 225, .38);
  box-shadow: var(--web10-shadow);
}
.web10-site .portfolio-shot {
  border-radius: 15px;
  border: 1px solid rgba(166, 207, 255, .5);
  box-shadow: 0 18px 46px rgba(0, 7, 30, .26);
  transition: transform .2s ease, box-shadow .2s ease;
}
.web10-site .portfolio-shot:hover { transform: translateY(-3px); box-shadow: 0 22px 54px rgba(0, 7, 30, .35); }
.web10-site .portfolio-shot > span:not(.web10-preview-ribbon) { background: #0b2240; }
.web10-site .portfolio-future {
  border-radius: 23px;
  background: #eff6ff;
  border: 1px solid #d7e6fa;
  box-shadow: 0 12px 35px rgba(22, 70, 128, .06);
}
.web10-site .portfolio-future h3 { letter-spacing: -.035em; }

/* Shared product cards are easier to scan and easier to tap. */
.web10-site .module-grid .module {
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(18, 60, 119, .06);
}
.web10-site .module-grid .module:hover { background: #fafdff; box-shadow: 0 16px 32px rgba(18, 60, 119, .11); }
.web10-site .module-grid .module-cover { border-radius: 9px; }
.web10-site .module-grid .module h4 { color: var(--web10-ink); }
.web10-site .module-grid .module .module-open { color: #0058cb; }
.web10-site .section-approach { background: #f7faff; }
.web10-site .section-approach .approach-step { border-color: #dce7f3; }
.web10-site .contact-card { border-radius: 23px; }
.web10-site .footer { background: #071831; }

/* WCAG-oriented focus treatment and reduced-motion behavior. */
.web10-site :is(.portfolio-shot, .ops-hero-shot, .module, .button, .hero-motion-link, .nav-cta):focus-visible {
  outline: 3px solid var(--web10-teal);
  outline-offset: 4px;
}

@media (max-width: 1100px) {
  .web10-site .hero-grid { gap: 33px; }
  .web10-site .hero h1 { font-size: clamp(48px, 5.2vw, 64px); }
}
@media (max-width: 880px) {
  .web10-site .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 42px; padding-top: 136px; padding-bottom: 70px; }
  .web10-site .hero-copy { max-width: 720px; }
  .web10-site .hero-art { width: 100%; max-width: 760px; }
  .web10-site .main-nav { gap: 0; }
  .web10-site .main-nav.is-open { background: #0a2450; }
  .web10-site .portfolio-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .web10-site .hero-grid { gap: 31px; padding-top: 122px; padding-bottom: 59px; }
  .web10-site .hero .eyebrow { font-size: 10px; padding: 7px 10px; border-radius: 12px; }
  .web10-site .hero h1 { font-size: clamp(40px, 10.1vw, 52px); line-height: 1.09; margin: 25px 0 20px; }
  .web10-site .hero-intro { font-size: 15px; line-height: 1.68; }
  .web10-site .hero-fit { gap: 7px; margin-top: 18px; }
  .web10-site .hero-fit span { font-size: 11px; padding: 6px 9px; }
  .web10-site .hero-buttons { margin-top: 22px; gap: 10px; }
  .web10-site .hero-buttons .button { width: 100%; min-height: 50px; justify-content: space-between; font-size: 13px; }
  .web10-site .hero-footnote { margin-top: 21px; }
  .web10-site .hero-motion-frame, .web10-site .ops-hero-shot { border-radius: 14px; }
  .web10-site .web10-preview-ribbon { min-height: 0; padding: 10px 12px; font-size: 10.5px; }
  .web10-site .section { padding-block: 68px; }
  .web10-site .section-intro h2 { line-height: 1.13; }
  .web10-site .portfolio-product, .web10-site .portfolio-future { border-radius: 17px; }
  .web10-site .portfolio-product { padding: 25px 20px; }
  .web10-site .portfolio-future { padding: 25px 20px; }
  .web10-site .module-grid .module { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .web10-site .portfolio-shot, .web10-site .module-grid .module, .web10-site .button {
    transition: none !important;
    transform: none !important;
  }
}