*,
  *::before,
  *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
  }

  :root {
      --bg: #0d2d6b;
      --surface: #f0f5fe;
      --surface2: #fffefe;
      --border: rgba(255, 255, 255, 0.07);
      --border2: rgba(255, 255, 255, 0.13);
      --text: #ffffff;
      --text-dark: #000000;
      --muted: #adadad;
      --accent: #0d2d6b;
      --accent-lt: rgba(232, 160, 32, 0.1);
      --accent-md: rgba(232, 160, 32, 0.22);
      --accent-glow: rgba(232, 160, 32, 0.3);
      --danger: #e05c2a;
      --danger-lt: rgba(224, 92, 42, 0.1);
      --green: #4caf72;
      --green-lt: rgba(76, 175, 114, 0.1);
  }



  /* ── HERO ── */
  .hero {
      min-height: 50vh;
      background: var(--surface);
      position: relative;
      overflow: hidden;
      grid-template-columns: 1fr 1fr;
      align-items: stretch;
  }

  .hero-inner {
      max-width: 1280px;
      margin: 0 auto;
      display: grid;
      /* grid-template-columns: 1fr 1fr; */
      height: 100%;
  }

  .inner {
      max-width: 1280px;
      margin: auto;
  }

  /* Industrial texture */
  .hero::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 0;
      background:
          linear-gradient(rgba(8, 33, 61, 0.164), rgba(26, 79, 160, 0.158)),
          url(/assete/images/page-banner/crushermanagement.webp);
      background-size: cover;
      background-position: center;
  }

  .hero-left {
      position: relative;
      z-index: 1;
      padding: 20px 64px 80px 190px;
      display: flex;
      flex-direction: column;
      justify-content: center;
  }

  .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--accent-lt);
      border: 1px solid var(--accent-md);
      border-radius: 3px;
      padding: 5px 12px;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 28px;
      width: fit-content;
  }

  .hero h1 {

      font-family: 'Syne', sans-serif;
      font-size: clamp(2.2rem, 4.5vw, 44px);
      font-weight: 700;
      line-height: 1.05;
      letter-spacing: 0.01em;
      color: #fff;
      margin-bottom: 12px;
  }

  .hero h1 .accent {
      color: #fff;
      display: block;
  }

  .hero h1 .sub {
      display: block;
      font-family: 'Syne', sans-serif;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.15em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 20px;
      font-style: normal;
  }

  .hero-desc {
      font-size: 16px;
      line-height: 1.8;
      color: #fff;
      max-width: 480px;
      font-weight: 600;
  }

  .hero-desc strong {
      color: var(--text);
      font-weight: 600;
  }




  .hero-btns {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      margin-top: 20px;
  }

  .btn-blue {
      background: var(--accent);
      color: #fff;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      padding: 15px 32px;
      border-radius: 8px;
      text-decoration: none;
      transition: all 0.25s;
  }

  .btn-blue:hover {
      background: #1447bf;
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(26, 86, 219, 0.35);
  }


  .btn-gold {
      background: var(--accent);
      color: var(--bg);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      padding: 14px 28px;
      border-radius: 5px;
      text-decoration: none;
      transition: all 0.25s;
  }

  .btn-gold:hover {
      background: #d4901a;
      transform: translateY(-2px);
      box-shadow: 0 8px 24px var(--accent-glow);
  }

  .btn-outline {
      border: 1px solid var(--border2);
      color: var(--muted);
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 14px 24px;
      border-radius: 5px;
      text-decoration: none;
      transition: all 0.25s;
      background: #2d659a;
  }

  .btn-outline:hover {
      border-color: var(--accent);
      color: var(--accent);
  }

  /* Impact numbers strip */
  .hero-impact {
      display: flex;
      gap: 0;
      border-top: 1px solid var(--border);
      padding-top: 32px;
  }

  .impact-item {
      padding-right: 28px;
      margin-right: 28px;
      border-right: 1px solid var(--border);
  }

  .impact-item:last-child {
      border-right: none;
  }

  .impact-num {
      font-family: 'Syne', sans-serif;
      font-size: 40px;
      color: #fff;
      line-height: 1;
      margin-bottom: 4px;
  }

  .impact-label {
      font-size: 11px;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #fff;
  }

  /* Hero right: module grid */
  .hero-right {
      position: relative;
      z-index: 1;
      background: rgba(0, 0, 0, 0);
      border-left: 1px solid var(--border);
      padding: 20px 64px 80px 72px;
      display: flex;
      flex-direction: column;
      justify-content: center;
  }

  .module-grid-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.2em;
      text-transform: uppercase;
      color: #000;
      margin-bottom: 20px;
  }

  .module-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
  }

  .module-chip {
      background: rgb(255 255 255 / 39%);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 14px 12px;
      text-align: center;
      transition: all 0.2s;
  }

  .module-chip:hover {
      background: var(--accent-lt);
      border-color: var(--accent-md);
  }

  .mc-icon {
      font-size: 20px;
      margin-bottom: 6px;
      display: block;
  }

  .mc-name {
      font-size: 11px;
      font-weight: 600;
      color: var(--text);
      line-height: 1.3;
  }

  /* ── SECTION BASE ── */
  section {
      padding: 100px 72px;
  }

  .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 16px;
  }

  .eyebrow::before {
      content: '';
      width: 20px;
      height: 2px;
      background: var(--accent);
  }

  .sh {
      font-family: 'Syne', sans-serif;
      font-size: clamp(2.2rem, 4.5vw, 44px);
      line-height: 1;
      letter-spacing: 0.01em;
      color: var(--text);
      margin-bottom: 18px;
  }

  .dark {
      color: var(--text-dark);
  }

  .sh em {
      color: #000000;
      font-style: normal;
  }

  .shs {
      font-family: 'Syne', sans-serif;
      font-size: clamp(2.2rem, 4.5vw, 44px);
      line-height: 1;
      letter-spacing: 0.01em;
      color: var(--text-dark);
      margin-bottom: 18px;
  }

  .shs em {
      color: var(--text-dark);
      font-style: normal;
  }

  .sp {
      font-size: 16px;
      line-height: 1.85;
      color: var(--muted);
      max-width: 600px;
      font-weight: 300;
  }

  /* ── STORY / WHY ── */
  #story {
      background: #fff;
  }

  .story-layout {
      display: grid;
      grid-template-columns: 2fr 1fr;
      gap: 80px;
      align-items: center;
  }

  .story-text p {
      font-size: 16px;
      line-height: 1.9;
      color: #000000c7;
      font-weight: 300;
      margin-bottom: 22px;
  }

  .story-text p strong {
      color: #000;
      font-weight: 600;
  }

  .research-badge {
      background: var(--surface2);
      border: 1px solid var(--border2);
      border-left: 3px solid var(--accent);
      border-radius: 0 10px 10px 0;
      padding: 20px 24px;
      margin-top: 28px;
  }

  .research-badge p {
      font-size: 14px;
      line-height: 1.7;
      color: var(--muted);
      font-weight: 300;
      margin-bottom: 0;
  }

  .research-badge p strong {
      color: var(--accent);
      font-weight: 700;
  }

  /* Highlights list */
  .highlights-grid {
      display: grid;
      /* grid-template-columns: 1fr 1fr; */
      gap: 10px;
  }

  .highlight-item {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 16px 18px;
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 14px;
      font-weight: 500;

      transition: all 0.2s;
  }

  .highlight-item:hover {
      border-color: var(--accent);

      background: var(--accent-lt);
  }

  .hi-num {
      font-family: 'Syne', sans-serif;
      font-size: 22px;
      color: var(--accent);
      flex-shrink: 0;
      line-height: 1;
  }

  /* ── MODULES ── */
  #modules {
      background: var(--surface);
  }

  .modules-intro {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: end;
      margin-bottom: 56px;
  }

  .modules-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 2px;
      background: var(--border);
      border-radius: 16px;
      overflow: hidden;
  }

  .mod-card {
      background: var(--bg);
      padding: 32px 26px;
      position: relative;
      overflow: hidden;
      transition: background 0.25s;
  }

  .mod-card:hover {
      background: #000;
  }

  .mod-card::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 2px;
      background: var(--accent);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.3s;
  }

  .mod-card:hover::after {
      transform: scaleX(1);
  }

  .mod-icon {
      width: 48px;
      height: 48px;
      border-radius: 10px;
      background: var(--accent-lt);
      border: 1px solid var(--accent-md);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 20px;
      margin-bottom: 18px;
  }

  .mod-card h3 {
      font-size: 15px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 8px;
  }


  .mod-card p {
      font-size: 13px;
      line-height: 1.65;
      color: var(--muted);
      font-weight: 300;
  }

  /* ── INTEGRATIONS ── */
  #integrations {
      background: #fff;
  }

  .int-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
      margin-top: 56px;
  }

  .int-visual {
      position: relative;
  }

  .int-center {
      background: var(--surface);
      border: 2px solid var(--accent-md);
      border-radius: 16px;
      padding: 28px 24px;
      text-align: center;
      margin-bottom: 16px;
  }

  .int-center-icon {
      font-size: 36px;
      margin-bottom: 10px;
      display: block;
  }

  .int-center h3 {
      font-family: 'Syne', sans-serif;
      font-size: 28px;
      color: var(--accent);
      letter-spacing: 0.05em;
  }

  .int-center p {
      font-size: 12px;
      color: var(--muted);
      font-weight: 500;
      letter-spacing: 0.06em;
      text-transform: uppercase;
  }

  .int-spokes {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 10px;
  }

  .int-spoke {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 13px;
      font-weight: 600;

      transition: all 0.2s;
  }

  .int-spoke:hover {
      border-color: var(--accent);

      background: var(--accent-lt);
  }

  .int-spoke-icon {
      font-size: 18px;
      flex-shrink: 0;
  }

  .int-text p {
      font-size: 16px;
      line-height: 1.85;
      color: #000000ce;
      font-weight: 300;
      margin-bottom: 24px;
  }

  .int-text p strong {
      color: var(--text);
      font-weight: 600;
  }

  .int-note {
      background: var(--surface);
      border: 1px solid var(--border2);
      border-left: 3px solid var(--accent);
      border-radius: 0 10px 10px 0;
      padding: 20px 24px;
  }

  .int-note p {
      font-size: 14px;
      line-height: 1.7;
      color: var(--muted);
      font-weight: 300;
      margin: 0;
  }

  /* ── FUTURE / IMPACT ── */
  #impact {
      background: var(--surface);
  }

  .impact-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: start;
      margin-top: 56px;
  }

  .impact-numbers {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-bottom: 32px;
  }

  .impact-box {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 28px 24px;
      text-align: center;
      transition: all 0.25s;
  }

  .impact-box:hover {
      border-color: var(--accent);
      transform: translateY(-3px);
  }

  .impact-box.danger {
      border-color: rgba(224, 92, 42, 0.2);
  }

  .impact-box.danger:hover {
      border-color: var(--danger);
  }

  .impact-box.green {
      border-color: rgba(76, 175, 114, 0.2);
  }

  .impact-box.green:hover {
      border-color: var(--green);
  }

  .impact-big {
      font-family: 'Syne', sans-serif;
      font-size: 56px;
      line-height: 1;
      margin-bottom: 6px;
  }

  .impact-box.danger .impact-big {
      color: var(--danger);
  }

  .impact-box.green .impact-big {
      color: var(--green);
  }

  .impact-box .impact-big {
      color: var(--accent);
  }

  .impact-box-label {
      font-size: 12px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--muted);
  }

  .impact-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
  }

  .impact-row {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: 18px 20px;
      border-radius: 12px;
      background: var(--bg);
      border: 1px solid var(--border);
      transition: all 0.2s;
  }

  .impact-row:hover {
      border-color: var(--accent);
      background: #000;
  }

  .impact-row-icon {
      font-size: 18px;
      flex-shrink: 0;
      margin-top: 1px;
  }

  .impact-row h4 {
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 3px;
  }

  .impact-row p {
      font-size: 13px;
      line-height: 1.6;
      color: var(--muted);
      font-weight: 300;
  }

  /* ── INDUSTRIES ── */
  #industries {
      background: #fff;
  }

  .ind-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 16px;
      margin-top: 56px;
  }

  .ind-card {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 32px 28px;
      transition: all 0.25s;
      position: relative;
      overflow: hidden;
  }

  .ind-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: var(--accent);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 0.3s;
  }

  .ind-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
  }

  .ind-card:hover::before {
      transform: scaleX(1);
  }

  .ind-icon {
      font-size: 36px;
      margin-bottom: 16px;
      display: block;
  }

  .ind-card h3 {
      font-size: 16px;
      font-weight: 700;
      color: #000;
      margin-bottom: 8px;
  }

  .ind-card p {
      font-size: 14px;
      line-height: 1.65;
      color: var(--muted);
      font-weight: 300;
  }

  /* ── FAQ ── */
  #faq {
      background: #fff;
  }

  .faq-layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      margin-top: 56px;
  }

  .faq-item {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 12px;
      overflow: hidden;
  }

  .faq-q {
      width: 100%;
      background: none;
      border: none;
      cursor: pointer;
      text-align: left;
      padding: 20px 22px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
      font-family: 'Syne', sans-serif;
      font-size: 14px;
      font-weight: 700;
      /* color: var(--text); */
      transition: color 0.2s;
  }

  .faq-q:hover {
      color: var(--accent);
  }

  .faq-item.open .faq-q {
      color: var(--accent);
  }

  .faq-icon {
      flex-shrink: 0;
      width: 24px;
      height: 24px;
      border-radius: 50%;
      border: 1px solid var(--border2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 16px;
      color: var(--accent);
      transition: transform 0.3s;
  }

  .faq-item.open .faq-icon {
      transform: rotate(45deg);
  }

  .faq-a {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease, padding 0.3s;
      padding: 0 22px;
      font-size: 14px;
      line-height: 1.8;
      color: var(--muted);
      font-weight: 300;
  }

  .faq-item.open .faq-a {
      max-height: 300px;
      padding: 0 22px 20px;
  }

  /* ── CTA ── */
  #cta {
      background: var(--surface);
      padding: 100px 72px;
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 80px;
      align-items: center;
      position: relative;
      overflow: hidden;
  }

  #cta::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse 50% 70% at 100% 50%, rgba(232, 160, 32, 0.06) 0%, transparent 65%);
  }

  .cta-left {
      position: relative;
      z-index: 1;
  }

  .cta-left h2 {
      font-family: 'Syne', sans-serif;
      font-size: clamp(2.2rem, 4.5vw, 44px);
      line-height: 1;
      letter-spacing: 0.01em;
      color: #fff;
      margin-bottom: 20px;
  }

  .cta-left h2 em {
      color: var(--accent);
      font-style: normal;
  }

  .cta-left p {
      font-size: 16px;
      line-height: 1.8;
      color: var(--muted);
      font-weight: 300;
      margin-bottom: 36px;
      max-width: 440px;
  }

  .cta-btns {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
  }

  .cta-note {
      margin-top: 16px;
      font-size: 12px;
      color: var(--muted);
  }

  .cta-right {
      position: relative;
      z-index: 1;
  }

  .contact-card {
      background: var(--bg);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 36px 32px;
  }

  .contact-card h4 {
      font-family: 'Syne', sans-serif;
      font-size: 28px;
      color: var(--accent);
      letter-spacing: 0.05em;
      margin-bottom: 24px;
  }

  .contact-item {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 16px 0;
      border-bottom: 1px solid var(--border);
  }

  .contact-item:last-child {
      border-bottom: none;
  }

  .contact-icon {
      font-size: 20px;
      flex-shrink: 0;
  }

  .contact-label {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 3px;
  }

  .contact-value {
      font-size: 15px;
      font-weight: 600;
      color: var(--text);
  }

  .contact-value a {
      color: var(--accent);
      text-decoration: none;
  }

  .contact-value a:hover {
      text-decoration: underline;
  }

  /* ── REVEAL ── */
  .reveal {
      opacity: 0;
      transform: translateY(24px);
      transition: opacity 0.65s ease, transform 0.65s ease;
  }

  .reveal.visible {
      opacity: 1;
      transform: none;
  }

  .overview-img {
      width: 100%;
      max-width: 400px;
      height: auto;
      display: block;
      margin: 0 auto;
      border-radius: 16px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  }

  /* ── RESPONSIVE ── */
  @media (max-width: 1100px) {


      section {
          padding: 80px 32px;
      }

      .hero {
          grid-template-columns: 1fr;
      }

      .hero-right {
          display: none;
      }

      .hero-left {
          padding: 130px 32px 80px;
      }

      .story-layout,
      .modules-intro,
      .int-layout,
      .impact-layout {
          grid-template-columns: 1fr;
          gap: 40px;
      }

      .modules-grid {
          grid-template-columns: repeat(2, 1fr);
      }

      .faq-layout {
          grid-template-columns: 1fr;
      }


  }

  @media (max-width: 640px) {

      section {
          padding: 60px 20px;
      }

      .hero-left {
          padding: 20px 20px 20px;
      }

      .modules-grid,
      .ind-grid,
      .impact-numbers {
          grid-template-columns: 1fr;
      }

      .highlights-grid,
      .int-spokes,
      .services-grid {
          grid-template-columns: 1fr;
      }

      .hero-impact {
          flex-wrap: wrap;
          gap: 20px;
      }

      .impact-item {
          border-right: none;
          margin-right: 0;
      }

      .hero-desc {
          line-height: normal;
      }


  }