/* Container */
    .container {
      max-width: 1280px;
      margin: 0 auto;
    }

    /* Hero Section */
    .hero {
      background: linear-gradient(
        to bottom,
        #eef4fb 0%,
        #e4effa 30%,
        #d6e9fb 65%,
        #c3e0ff 100%
      );
      padding: 60px 140px;
      position: relative;
      overflow: hidden;
    }

    .hero::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 60%;
      height: 1px;

      background: linear-gradient(
        to right,
        transparent,
        rgba(1,118,211,0.35),
        transparent
      );

      opacity: 0.6;
    }
    
    .hero .container {
      display: flex;
      align-items: center;
      gap: 100px;
      position: relative;
      z-index: 1;
    }
    
    .hero-content {
      flex: 1.5;
      max-width: 600px;
    }
    
    .hero-visual {
      flex: 0.5;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 550px;
      perspective: 1200px;
    }
    
    .hero-eyebrow {
      display: inline-block;
      color: var(--primary-blue);
      font-size: 16px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      margin-bottom: 24px;
    }

    .hero h1 {
      font-size: 58px;
      font-weight: 800;
      margin-bottom: 24px;
      line-height: 1.1;
      color: var(--dark-blue);
    }
    
    .hero .subtext {
      font-size: 18px;
      line-height: 1.7;
      color: var(--text-secondary);
      margin-bottom: 40px;
    }
    
    .cta-primary {
      background: var(--primary-blue);
      color: var(--white);
      padding: 16px 36px;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 600;
      text-decoration: none;
      transition: all 0.2s;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    
    .cta-primary:hover {
      background: var(--dark-blue);
      transform: translateY(-2px);
      box-shadow: 0 8px 24px rgba(4,118,211,0.3);
    }
    
    .hero-visual img {
      width: 500px;
    }

    .hero-visual-container {
      display: flex;
      justify-content: center;
      align-items: center;
    }
    /* Standard Section */
    .standard-section {
      background: rgba(255, 255, 255, 0.6);
    }
    
    .section-header {
      text-align: center;
      max-width: 1000px;
      margin: 0 auto 60px;
    }
    
    .section-title {
      font-size: 42px;
      font-weight: 800;
      margin-bottom: 24px;
    }
    
    .section-subtitle {
      font-size: 18px;
      color: var(--text-secondary);
      line-height: 1.7;
    }
    
    /* Value Cards */
    .value-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 32px;
    }
    
    .value-card {
      background: white;
      border-radius: 20px;
      padding: 40px 32px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.06);
      transition: all 0.3s;
      border: 2px solid transparent;
    }
    
    .value-card:hover {
      transform: translateY(-8px);
      box-shadow: 0 12px 32px rgba(0,0,0,0.12);
      border-color: var(--primary-blue);
    }
    
    .value-card .icon {
      font-size: 42px;
      margin-bottom: 30px;
      display: flex;
      justify-content: center;
    }

    .value-card i {
      font-size: 52px;
    }
    
    .value-card h3 {
      font-size: 24px;
      margin-bottom: 12px;
      color: var(--dark-blue);
      text-align: center;
    }
    
    .value-card p {
      text-align: justify;
      font-size: 16px;
      color: var(--text-secondary);
      line-height: 1.6;
    }
    
    /* Service Detail Section */
    .service-detail-section {
      background: var(--bg-light);
    }

    .service-detail-section.masterkit {
      background: transparent;
    }
    
    .service-detail-container {
      display: flex;
      align-items: center;
      gap: 80px;
      margin-top: 40px;
    }
    
    .service-detail-container.reverse {
      flex-direction: row-reverse;
    }
    
    .service-content {
      flex: 1;
    }
    
    .service-visual {
      flex: 1;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 400px;
    }

    .service-content.masterkit {
      flex: 1.4;
    }
    
    .service-visual.masterkit {
      flex: 0.6;
      min-height: 400px;
    }

    .service-visual.masterkit img {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 350px;
    }

    .service-content.risk {
      flex: 1.3;
    }
    
    .service-visual.risk {
      flex: 0.7;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 400px;
    }
    
    .service-content h3 {
      font-size: 24px;
      margin-bottom: 20px;
      color: var(--dark-blue);
      text-align: center;
    }
    
    .service-content p {
      text-align: justify;
      font-size: 16px;
      color: var(--text-secondary);
      line-height: 1.8;
      margin-bottom: 24px;
    }
    

    /* Highlight Chips */
    .highlight-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 24px;
      justify-content: center;
    }
    
    .highlight-chip {
      text-align: justify;
      background: var(--dark-blue);
      color: white;
      padding: 10px 20px;
      border-radius: 24px;
      font-size: 14px;
      font-weight: 700;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      transition: all 0.3s;
      box-shadow: 0 2px 8px rgba(3,45,96,0.2);
    }
    
    .highlight-chip:hover {
      background: var(--primary-blue);
      transform: translateY(-2px);
      box-shadow: 0 4px 12px rgba(4,118,211,0.3);
    }
    
    .service-visual.cyber img {
      width: 400px;
    }

    .service-content.cyber {
      display: flex;
      justify-content: center;
    }

    /* Feature List */
    .feature-list {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-top: 24px;
    }
    
    .feature-item {
      background: rgba(255,255,255,0.8);
      padding: 20px;
      border-radius: 12px;
      border-left: 4px solid var(--primary-blue);
      transition: all 0.3s;
    }
    
    .feature-item:hover {
      background: white;
      transform: translateX(8px);
      box-shadow: 0 4px 16px rgba(0,0,0,0.08);
    }
    
    .feature-item h4 {
      font-size: 18px;
      margin-bottom: 8px;
      color: var(--primary-blue);
    }
    
    .feature-item p {
      text-align: justify;
      font-size: 16px;
      color: var(--text-secondary);
      margin: 0;
      line-height: 1.6;
    }
    
    /* Kit Cards */
    .kit-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24px;
      margin-top: 32px;
    }
    
    .kit-card {
      background: white;
      padding: 28px;
      border-radius: 16px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.06);
      transition: all 0.3s;
      border: 2px solid transparent;
    }
    
    .kit-card:hover {
      transform: translateY(-4px);
      box-shadow: 0 8px 24px rgba(0,0,0,0.12);
      border-color: var(--primary-blue);
    }
    
    .kit-card .icon {
      display: flex;
      align-items: center;
    }
    
    .kit-card h4 {
      font-size: 18px;
      color: var(--dark-blue);

    }
    
    .kit-card p {
      text-align: justify;
      font-size: 16px;
      color: var(--text-secondary);
      line-height: 1.6;
      margin: 0;
    }
    
    /* Infographic - 2 Layer Shield */
    .two-layer-shield {
      width: 100%;
      max-width: 400px;
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    
    .shield-layer {
      background: white;
      padding: 32px;
      border-radius: 20px;
      box-shadow: 0 4px 16px rgba(0,0,0,0.08);
      position: relative;
      overflow: hidden;
    }
    
    .shield-layer::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 6px;
      height: 100%;
      background: linear-gradient(180deg, var(--primary-blue), var(--dark-blue));
    }
    
    .shield-layer .layer-number {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 30px;
      height: 30px;
      background: var(--primary-blue);
      color: white;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 18px;
    }
    
    .shield-layer.financial .layer-number {
      background: var(--bg-light);
      color: var(--dark-blue);
    }

    .merge {
      display: flex;
      align-items: center;
      gap: 20px;
      margin-bottom: 16px;
    }

    .merge i {
      font-size: 28px;
    }

    .shield-layer .icon {
      align-items: center;
      display: flex;
    }
    
    .shield-layer h4 {
      font-size: 22px;
      color: var(--dark-blue);
    }
    
    .shield-layer p {
      text-align: justify;
      font-size: 16px;
      color: var(--text-secondary);
      line-height: 1.6;
      margin: 0;
    }
  
    .service-visual.risk {
      width: 100%;
      max-width: 600px;
      margin: 0 auto;
      aspect-ratio: 16 / 9;
      overflow: hidden;
      border-radius: 12px;
      align-items: center;
      justify-content: center;
    }

    .service-visual.risk img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      transition: transform 0.3s ease;
    }

    .service-visual.risk:hover img {
      transform: scale(1.05);
    }
    
    /* Footer CTA Section */
    .footer-cta-section {
      background: var(--dark-blue);
      color: var(--white);
      text-align: center;
      padding: 80px 160px;
    }
    
    .footer-cta-section h2 {
      font-size: 42px;
      margin-bottom: 28px;
      font-weight: 800;
    }
    
    .footer-cta-section .subtext {
      font-size: 18px;
      margin-bottom: 44px;
      opacity: 0.95;
      line-height: 1.7;
    }
    
    .cta-buttons {
      display: flex;
      gap: 16px;
      justify-content: center;
      flex-wrap: wrap;
    }
    
    .cta-secondary {
      background: transparent;
      color: white;
      border: 2px solid white;
      padding: 16px 36px;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 600;
      text-decoration: none;
      transition: all 0.2s;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    
    .cta-secondary:hover {
      background: white;
      color: var(--dark-blue);
      transform: translateY(-2px);
    }
    
    .cta-white {
      background: white;
      color: var(--dark-blue);
      padding: 16px 36px;
      border-radius: 8px;
      font-size: 16px;
      font-weight: 600;
      text-decoration: none;
      transition: all 0.2s;
      display: inline-flex;
      align-items: center;
      gap: 8px;
    }
    
    .cta-white:hover {
      background: var(--light-blue);
      transform: translateY(-2px);
    }

    section {
      position: relative;
    }

    section::after {
      content: "";
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 60%;
      height: 1px;
      background: linear-gradient(
        to right,
        transparent,
        rgba(0,0,0,0.08),
        transparent
      );
    }
    
    /* Responsive */
    @media (max-width: 1024px) {
      .hero .container {padding:  0 0; height: 400px;}
      .hero-visual {flex: 0.8;}
      .hero-visual img { width: 400px;}
      .hero-content {flex: 1.2;}
      .hero h1 { font-size: 36px; }
      .kit-grid { grid-template-columns: repeat(2, 1fr); }
      .container { padding: 0 0;}
      .service-detail-container.reverse { gap: 60px;}
      .service-detail-container.reverse .service-visual { flex: 0.3;}
      .service-detail-container.reverse .service-content { flex: 1.7;}
      .highlight-chips {justify-content: center;}
      .service-content h3 {text-align: center;}
      .service-detail-container .service-content { flex: 1.3;}
      .service-detail-container .service-visual { flex: 0.7;}
      .monitoring-visual { max-width: 350px;}
    }
    
    @media (max-width: 768px) {
      .nav-menu { display: none; }
      .hero { padding: 60px 20px; }
      .hero .container { height: auto;}
      .hero-visual img { width: 200px;}
      .hero .subtext { margin-bottom: 12px;}
      .footer-content { grid-template-columns: 1fr; }
      .footer-brand { padding-right: 0; }
      .cta-primary { width: 100%; justify-content: center;}
      .value-grid {grid-template-columns: 1fr;}
      .service-detail-container { flex-direction: column; gap: 16px;}
      .service-detail-container.reverse { flex-direction: column;}
      .service-detail-container.reverse .service-visual { display: none;}
      .service-detail-container .service-visual { min-height: 250px;} 
      .shield-layer { padding: 20px 25px;}
      .merge { gap: 10px;}
      .value-grid { gap: 12px;}
      .value-card { padding: 18px 20px;}
      .value-card .icon { margin-bottom: 12px; display: flex; align-items: center;}
      .value-card i { font-size: 35px;}
      .value-card h3 { text-align: center;}
      .service-detail-container { margin-top: 0;}
      .service-content h3 { margin-bottom: 12px;}
      .feature-list { margin-top: 0; gap: 12px;}
      .feature-item { padding: 10px 20px;}
      .highlight-chips { flex-wrap: nowrap; margin-top: 16px;}
      .highlight-chip { text-align: center; padding: 8px 10px; border-radius: 18px;}
      .kit-grid { margin-top: 16px; gap: 12px;}
      .kit-card { padding: 8px 12px;}
      .kit-card p { text-align: center;}
      .service-visual.risk { display: none;}
    }