/* ============================================================
   service-ongoing.css
   ============================================================ */

.breadcrumb {
  background: var(--primary);
  color: rgba(255,255,255,0.6);
}

.breadcrumb a {
  color: rgba(255,255,255,0.6);
}
.breadcrumb a:hover {
  color: var(--accent);
}
.breadcrumb span {
  color: rgba(255,255,255,0.3);
}

  .detail-hero{background:var(--primary);padding:40px 80px 80px;position:relative;overflow:hidden;}
  .detail-hero::before{content:'';position:absolute;left:-100px;top:-100px;width:600px;height:600px;background:radial-gradient(ellipse,rgba(137,222,124,0.1),transparent 65%);border-radius:50%;animation:glow 9s ease-in-out infinite;pointer-events:none;}
  @keyframes glow{0%,100%{transform:scale(1);}50%{transform:scale(1.12);}}
  .hero-inner{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative;z-index:1;}
  .dh-label{font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:12px;}
  .dh-title{font-size:clamp(36px,4.5vw,58px);font-weight:900;line-height:1.15;color:var(--white);margin-bottom:20px;letter-spacing:-.02em;}
  .dh-title em{font-style:normal;color:var(--accent);}
  .dh-sub{font-size:16px;color:rgba(255,255,255,0.65);line-height:1.9;margin-bottom:32px;}
  .dh-btns{display:flex;gap:12px;flex-wrap:wrap;}
  .btn-accent{background:var(--accent);color:var(--primary);padding:13px 28px;border-radius:40px;font-size:14px;font-weight:700;text-decoration:none;display:inline-block;transition:background .25s,transform .25s;}
  .btn-accent:hover{background:#a8f09a;transform:translateY(-2px);}
  .btn-ghost-light{background:transparent;color:rgba(255,255,255,0.65);padding:13px 24px;border-radius:40px;border:1.5px solid rgba(255,255,255,0.2);font-size:14px;font-weight:500;text-decoration:none;display:inline-block;transition:all .2s;}
  .btn-ghost-light:hover{color:var(--white);border-color:rgba(255,255,255,0.5);transform:translateY(-2px);}
  .btn-ghost{background:transparent;color:var(--primary);padding:13px 24px;border-radius:40px;border:1.5px solid currentColor;font-size:14px;font-weight:500;text-decoration:none;display:inline-block;transition:color .2s,transform .2s;}
  .btn-ghost:hover{color:var(--accent-dark);background-color: var(--bg);transform:translateY(-2px);}
  .hero-imgs{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
  .hi-img{border-radius:14px;overflow:hidden;aspect-ratio:1;box-shadow:0 14px 40px rgba(0,0,0,0.22);}
  .hi-img:first-child{margin-top:24px;}
  .hi-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s;}
  .hi-img:hover img{transform:scale(1.05);}

  /* WHO IS THIS FOR */
  .for-section{background:var(--bg);padding:80px;}
  .sec-label{font-size:13px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent-dark);margin-bottom:10px;}
  .sec-title{font-size:clamp(24px,3vw,36px);font-weight:900;margin-bottom:40px;}
  .for-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  .for-card{background:var(--white);border-radius:16px;padding:28px;border-left:3px solid var(--accent);transition:transform .3s,box-shadow .3s;}
  .for-card:hover{transform:translateY(-4px);box-shadow:0 14px 40px rgba(42,50,75,0.1);}
  .fc-icon{font-size:26px;margin-bottom:12px;}
  .fc-title{font-size:15px;font-weight:700;margin-bottom:8px;}
  .fc-desc{font-size:13px;color:var(--text-muted);line-height:1.8;}

  /* SERVICES DETAIL */
  .services-detail{background:var(--white);padding:80px;}
  .sd-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;margin-top:48px;}
  .sd-card{background:var(--bg);border-radius:20px;padding:32px;transition:transform .3s,box-shadow .3s;}
  .sd-card:hover{transform:translateY(-5px);box-shadow:0 18px 48px rgba(42,50,75,0.1);}
  .sdc-num{font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-dark);margin-bottom:16px;}
  .sdc-icon{font-size:30px;margin-bottom:14px;}
  .sdc-title{font-size:17px;font-weight:700;margin-bottom:12px;}
  .sdc-list{display:flex;flex-direction:column;gap:7px;}
  .sdc-item{font-size:13px;color:var(--text-muted);line-height:1.7;padding-left:14px;position:relative;}
  .sdc-item::before{content:'·';position:absolute;left:0;color:var(--accent-dark);font-weight:700;}

  /* HOW TO START */
  .how-section{background:var(--primary);padding:80px;color:var(--white);}
  .how-section .sec-label{color:var(--accent);}
  .how-section .sec-title{color:var(--white);}
  .how-inner{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-top:48px;}
  .how-steps{display:flex;flex-direction:column;gap:24px;}
  .how-step{display:flex;gap:16px;align-items:flex-start;}
  .hs-dot{width:36px;height:36px;border-radius:50%;background:rgba(137,222,124,0.15);border:1px solid var(--accent);color:var(--accent);font-size:14px;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px;}
  .hs-body h4{font-size:15px;font-weight:700;margin-bottom:6px;}
  .hs-body p{font-size:13px;opacity:.6;line-height:1.7;}
  .how-img{border-radius:16px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 20px 60px rgba(0,0,0,0.25);}
  .how-img img{width:100%;height:100%;object-fit:cover;}

  .cta-band{background:var(--accent);padding:80px;text-align:center;}
  .cta-band h2{font-size:clamp(24px,3vw,38px);font-weight:900;color:var(--primary);margin-bottom:12px;}
  .cta-band p{font-size:15px;color:var(--primary);opacity:.7;margin-bottom:32px;}
  .btn-primary{background:var(--primary);color:var(--white);padding:13px 28px;border-radius:40px;font-size:14px;font-weight:700;text-decoration:none;display:inline-block;transition:background .25s,transform .25s;}
  .btn-primary:hover{background:#1a2136;transform:translateY(-2px);}

  footer{background:var(--primary);color:var(--white);padding:60px 80px;display:grid;grid-template-columns:2fr 1fr 1fr;gap:60px;}
  .footer-brand .logo{font-size:16px;font-weight:700;letter-spacing:.08em;margin-bottom:12px;}
  .footer-brand p{font-size:13px;opacity:.5;line-height:1.8;max-width:260px;}
  .footer-col h4{font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.4;margin-bottom:16px;}
  .footer-col a{display:block;font-size:13px;opacity:.7;text-decoration:none;color:var(--white);margin-bottom:8px;transition:opacity .2s;}
  .footer-col a:hover{opacity:1;}
  .footer-bottom{background:var(--primary);text-align:center;padding:20px;border-top:1px solid rgba(255,255,255,0.08);}
  .footer-bottom p{font-size:14px;color:rgba(255,255,255,0.35);}

  /* PRICE */
  .price-section{background:var(--white);padding:64px 80px;}
  .price-cards-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:32px;}
  .price-pkg{background:var(--bg);border-radius:18px;padding:28px 24px;border:1.5px solid transparent;transition:border-color .25s,transform .3s,box-shadow .3s;}
  .price-pkg:hover{border-color:var(--accent);transform:translateY(-4px);box-shadow:0 16px 40px rgba(42,50,75,0.1);}
  .price-pkg-label{font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-dark);margin-bottom:10px;}
  .price-pkg-title{font-size:15px;font-weight:700;color:var(--primary);margin-bottom:14px;}
  .price-pkg-amount{display:flex;align-items:baseline;gap:4px;margin-bottom:6px;}
  .ppa-curr{font-size:13px;font-weight:500;color:var(--text-muted);}
  .ppa-num{font-size:clamp(28px,3vw,38px);font-weight:900;color:var(--primary);letter-spacing:-.02em;line-height:1;}
  .ppa-unit{font-size:13px;font-weight:600;color:var(--text-muted);}
  .price-pkg-note{font-size:14px;color:var(--text-light);line-height:1.7;margin-top:12px;padding-top:12px;border-top:1px solid rgba(42,50,75,0.07);}

  /* BUNDLE PLAN */
  .bundle-section{background:var(--primary);padding:80px;color:var(--white);}
  .bundle-section .sec-label{color:var(--accent);}
  .bundle-top{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:start;margin-bottom:60px;}
  .bundle-highlights{padding-top:84px;}
  .bundle-desc{font-size:15px;color:rgba(255,255,255,0.65);line-height:2;margin-top:20px;}
  .bundle-cta-note{display:inline-flex;align-items:center;gap:8px;margin-top:24px;background:rgba(137,222,124,0.12);border:1px solid rgba(137,222,124,0.3);border-radius:30px;padding:10px 18px;font-size:13px;color:var(--accent);font-weight:600;}

  /* Comparison table */
  .plan-table-wrap{overflow-x:auto;border-radius:16px;border:1px solid rgba(255,255,255,0.08);}
  .plan-table{width:100%;border-collapse:collapse;font-size:14px;}
  .plan-table th,.plan-table td{padding:14px 18px;text-align:left;border-bottom:1px solid rgba(255,255,255,0.06);}
  .plan-table thead th{background:rgba(255,255,255,0.05);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,0.4);}
  .plan-table thead th:first-child{color:rgba(255,255,255,0.25);}
  .plan-table thead th.col-highlight{background:rgba(137,222,124,0.12);color:var(--accent);}
  .plan-table tbody tr:last-child td{border-bottom:none;}
  .plan-table tbody tr:hover td{background:rgba(255,255,255,0.03);}
  .plan-table td:first-child{font-size:13px;color:rgba(255,255,255,0.5);font-weight:500;}
  .plan-table td:not(:first-child){color:rgba(255,255,255,0.8);}
  .plan-table td.col-highlight{background:rgba(137,222,124,0.06);}
  .plan-table .row-price td{background:rgba(255,255,255,0.03);}
  .plan-table .row-price td:first-child{font-weight:700;color:rgba(255,255,255,0.7);}
  .plan-table .price-val{font-size:16px;font-weight:900;color:var(--white);letter-spacing:-.01em;}
  .plan-table .price-val.accent{color:var(--accent);}
  .plan-table .check{color:var(--accent);font-weight:700;}
  .plan-table .dash{color:rgba(255,255,255,0.2);}
  .bundle-footnote{font-size:14px;color:rgba(255,255,255,0.35);line-height:1.8;margin-top:20px;padding-top:16px;border-top:1px solid rgba(255,255,255,0.07);}

  /* PROCESS */
  .process-section{background:var(--bg);padding:80px;}
  .process-section .sec-label{color:var(--accent-dark);}
  .process-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-top:56px;position:relative;}
  .process-steps::before{content:'';position:absolute;top:20px;left:10%;right:10%;height:1px;background:rgba(137,222,124,0.5);z-index:0;}
  .proc-step{display:flex;flex-direction:column;align-items:center;text-align:center;position:relative;z-index:1;padding:0 8px;}
  .ps-num{width:40px;height:40px;border-radius:50%;background:var(--white);border:2px solid var(--accent-dark);color:var(--accent-dark);font-size:13px;font-weight:900;display:flex;align-items:center;justify-content:center;margin-bottom:16px;transition:background .25s,transform .25s;box-shadow:0 4px 16px rgba(92,184,80,0.2);}
  .proc-step:hover .ps-num{background:var(--accent-dark);color:var(--white);transform:scale(1.1);}
  .ps-title{font-size:13px;font-weight:700;color:var(--primary);margin-bottom:6px;}
  .ps-desc{font-size:11.5px;color:var(--text-muted);line-height:1.6;}

  .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease;}
  .reveal.visible{opacity:1;transform:none;}

  @media(max-width:900px){
    nav{padding:0;} .nav-links{display:none;}
    .breadcrumb,.detail-hero,.for-section,.services-detail,.how-section,.price-section,.bundle-section,.process-section,.cta-band{padding-left:28px;padding-right:28px;}
    .hero-inner,.how-inner,.bundle-top{grid-template-columns:1fr;}
    .bundle-highlights{padding-top:0;}
    .for-grid,.sd-grid,.price-cards-row{grid-template-columns:1fr;}
    .process-steps{grid-template-columns:1fr 1fr;gap:28px;}
    .process-steps::before{display:none;}
     .port-item{spect-ratio:height;}
    footer{grid-template-columns:1fr;gap:32px;padding:48px 28px;}
  }