/* ============================================================
   service-line.css
   ============================================================ */

  .detail-hero{padding:40px 80px 80px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative;overflow:hidden;}
  .detail-hero::after{content:'';position:absolute;left:-100px;bottom:-100px;width:500px;height:500px;background:radial-gradient(ellipse,rgba(6,199,85,0.1),transparent 70%);border-radius:50%;animation:glow 8s ease-in-out infinite;pointer-events:none;}
  @keyframes glow{0%,100%{transform:scale(1);}50%{transform:scale(1.1);}}
  .dh-label{font-size:14px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--line-green);margin-bottom:12px;}
  .dh-title{font-size:clamp(36px,4.5vw,58px);font-weight:900;line-height:1.15;margin-bottom:20px;letter-spacing:-.02em;}
  .dh-title em{font-style:normal;color:var(--line-green);}
  .dh-sub{font-size:16px;color:var(--text-muted);line-height:1.9;margin-bottom:32px;}
  .dh-btns{display:flex;gap:12px;flex-wrap:wrap;}
  .btn-line{background:var(--line-green);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-line:hover{background:#05a847;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);}

  .phone-mockup{position:relative;display:flex;justify-content:center;animation:phoneFloat 6s ease-in-out infinite;}
  @keyframes phoneFloat{0%,100%{transform:translateY(0);}50%{transform:translateY(-14px);}}
  .phone-frame{width:240px;height:480px;background:var(--primary);border-radius:40px;box-shadow:0 40px 80px rgba(42,50,75,0.25);padding:16px;position:relative;overflow:hidden;}
  .phone-screen{width:100%;height:100%;background:var(--white);border-radius:28px;overflow:hidden;display:flex;flex-direction:column;}
  .ps-header{background:var(--line-green);padding:14px 16px;display:flex;align-items:center;gap:10px;}
  .ps-avatar{width:32px;height:32px;border-radius:50%;background:var(--white);overflow:hidden;flex-shrink:0;}
  .ps-avatar img{width:100%;height:100%;object-fit:cover;}
  .ps-name{font-size:14px;font-weight:700;color:var(--white);}
  .ps-body{flex:1;padding:14px;display:flex;flex-direction:column;gap:10px;background:#f0f0f0;}
  .chat-bubble{max-width:80%;padding:9px 12px;border-radius:12px;font-size:14px;line-height:1.5;}
  .bubble-recv{background:var(--white);align-self:flex-start;border-radius:4px 12px 12px 12px;}
  .bubble-send{background:var(--line-green);color:var(--white);align-self:flex-end;border-radius:12px 4px 12px 12px;}
  .menu-bar{background:var(--white);padding:10px;display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px;}
  .menu-item{background:var(--line-green);border-radius:8px;height:30px;display:flex;align-items:center;justify-content:center;font-size:9px;color:var(--white);font-weight:700;}

  /* INCLUDED */
  .included{background:var(--white);padding:80px;}
  .sec-label{font-size:14px;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;}
  .inc-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:20px;}
  .inc-card{background:var(--bg);border-radius:16px;padding:28px;border:2px solid transparent;transition:border-color .25s,transform .3s;}
  .inc-card:hover{border-color:var(--line-green);transform:translateY(-4px);}
  .ic-icon{font-size:28px;margin-bottom:14px;}
  .ic-title{font-size:16pxfont-weight:700;margin-bottom:8px;}
  .ic-desc{font-size:14px;color:var(--text-muted);line-height:1.8;}

  /* NOTE */
  .note-section{background:var(--bg);padding:60px 80px;}
  .note-inner{background:rgba(6,199,85,0.08);border-left:4px solid var(--line-green);border-radius:0 16px 16px 0;padding:28px 32px;max-width:720px;}
  .note-inner h4{font-size:16pxfont-weight:700;margin-bottom:8px;}
  .note-inner p{font-size:14px;color:var(--text-muted);line-height:1.8;}

  /* NEXT STEP */
  .next-step{background:var(--primary);padding:80px;color:var(--white);display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;}
  .ns-label{font-size:14px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;}
  .ns-title{font-size:clamp(22px,2.5vw,32px);font-weight:900;color:var(--white);margin-bottom:16px;}
  .ns-desc{font-size:16pxcolor:rgba(255,255,255,0.65);line-height:1.9;margin-bottom:28px;}
  .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);}
  .ns-img{border-radius:16px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 20px 60px rgba(0,0,0,0.25);}
  .ns-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s;}
  .ns-img:hover img{transform:scale(1.04);}

  .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:16pxcolor: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:14px;opacity:.5;line-height:1.8;max-width:260px;}
  .footer-col h4{font-size:14px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.4;margin-bottom:16px;}
  .footer-col a{display:block;font-size:14px;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-inner{display:flex;align-items:center;justify-content:space-between;gap:40px;flex-wrap:wrap;border:1.5px solid rgba(42,50,75,0.08);border-radius:20px;padding:40px 48px;}
  .price-label{font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--line-green);margin-bottom:8px;}
  .price-title{font-size:16px;font-weight:700;color:var(--primary);margin-bottom:6px;}
  .price-note{font-size:14px;color:var(--text-light);line-height:1.6;max-width:360px;}
  .price-right{display:flex;align-items:baseline;gap:6px;flex-shrink:0;}
  .price-from{font-size:14px;font-weight:500;color:var(--text-muted);}
  .price-amount{font-size:clamp(36px,4vw,52px);font-weight:900;color:var(--primary);letter-spacing:-.02em;line-height:1;}
  .price-unit{font-size:16pxfont-weight:600;color:var(--text-muted);}
  .price-tag{display:inline-block;font-size:14px;font-weight:700;background:rgba(6,199,85,0.1);color:var(--line-green);padding:4px 12px;border-radius:20px;margin-top:8px;letter-spacing:.04em;}

  /* PRICE GRID */
.price-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
.price-card{border-radius:20px;padding:36px 32px;border:2px solid transparent;transition:border-color .3s,transform .3s,box-shadow .3s;display:flex;align-items:flex-start;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.price-card-a{background:var(--primary);color:var(--white);}
.price-card-b{background:var(--bg);color:var(--primary);}
.price-card:hover{transform:translateY(-5px);box-shadow:0 20px 60px rgba(42,50,75,0.14);}
.price-card-a:hover{border-color:var(--accent);}
.price-card-b:hover{border-color:var(--primary);}
.pc-label{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:10px;}
.price-card-a .pc-label{color:var(--accent);}
.price-card-b .pc-label{color:var(--accent-dark);}
.pc-title{font-size:18px;font-weight:900;margin-bottom:10px;}
.price-card-a .pc-title{color:var(--white);}
.price-card-b .pc-title{color:var(--primary);}
.pc-note{font-size:14px;line-height:1.7;}
.price-card-a .pc-note{color:rgba(255,255,255,0.55);}
.price-card-b .pc-note{color:var(--text-light);}
.pc-right{display:flex;align-items:baseline;gap:4px;flex-shrink:0;margin-top:8px;}
.pc-from{font-size:14px;font-weight:500;}
.price-card-a .pc-from{color:rgba(255,255,255,0.5);}
.price-card-b .pc-from{color:var(--text-muted);}
.pc-amount{font-size:clamp(30px,3.5vw,42px);font-weight:900;letter-spacing:-.02em;line-height:1;}
.price-card-a .pc-amount{color:var(--white);}
.price-card-b .pc-amount{color:var(--primary);}
.pc-unit{font-size:14px;font-weight:600;}
.price-card-a .pc-unit{color:rgba(255,255,255,0.5);}
.price-card-b .pc-unit{color:var(--text-muted);}


/* FAQ */
.faq-section{background:var(--bg);padding:80px;}
.faq-list{display:flex;flex-direction:column;gap:16px;margin-top:40px;}
.faq-item{border:1.5px solid rgba(42,50,75,0.08);border-radius:16px;overflow:hidden;transition:border-color .25s;}
.faq-item:hover{border-color:rgba(6,199,85,0.4);}
.faq-q{width:100%;background:var(--white);border:none;padding:22px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px;cursor:pointer;text-align:left;}
.faq-q-text{font-size:16px;font-weight:700;color:var(--primary);line-height:1.5;}
.faq-icon{width:28px;height:28px;border-radius:50%;background:rgba(6,199,85,0.1);color:var(--line-green);font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .25s,transform .3s;}
.faq-item.is-open .faq-icon{background:var(--line-green);color:var(--white);transform:rotate(45deg);}
.faq-a{display:none;background:var(--white) ; padding:0 28px 22px;font-size:14px;color:var(--text-muted);line-height:1.9;}
.faq-a p+p{margin-top:10px;}
.faq-item.is-open .faq-a{display:block;}

  /* PORTFOLIO — dark bg (swapped) */
  .portfolio-section{background:var(--primary);padding:80px;}
  .portfolio-section .sec-label{color:var(--accent);}
  .portfolio-section .sec-title{color:var(--white);}
  .port-header{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:40px;flex-wrap:wrap;gap:16px;}
  .port-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;}
  .port-item{border-radius:16px;overflow:hidden;aspect-ratio:4/3;position:relative;cursor:pointer;box-shadow:0 8px 32px rgba(0,0,0,0.25);}
  .port-item img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease;}
  .port-item:hover img{transform:scale(1.06);}
  .port-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(42,50,75,0.75) 0%,transparent 55%);opacity:0;transition:opacity .3s;display:flex;align-items:flex-end;padding:20px;}
  .port-item:hover .port-overlay{opacity:1;}
  .port-label{font-size:14px;font-weight:700;color:var(--white);letter-spacing:.04em;}
  .port-extra{display:none;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px;}
  .port-extra.open{display:grid;}
  .port-toggle{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--accent);background:none;border:1.5px solid var(--accent);padding:9px 20px;border-radius:30px;cursor:pointer;transition:background .2s,color .2s;margin-top:28px;}
  .port-toggle:hover{background:var(--accent);color:var(--primary);}
  .port-toggle .arrow{transition:transform .3s;display:inline-block;}
  .port-toggle.open .arrow{transform:rotate(180deg);}

  /* PROCESS — light bg (swapped) */
  .process-section{background:var(--white);padding:80px;color:var(--primary);}
  .process-section .sec-label{color:var(--accent-dark);}
  .process-section .sec-title{color:var(--primary);}
  .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(92,184,80,0.4);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:14px;font-weight:900;display:flex;align-items:center;justify-content:center;margin-bottom:16px;transition:background .25s,transform .25s;box-shadow:0 4px 14px 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:14px;font-weight:700;color:var(--primary);margin-bottom:6px;}
  .ps-desc{font-size:12px;color:var(--text-middle);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,.included,.note-section,.price-section,.portfolio-section,.process-section,.next-step,.cta-band{padding-left:28px;padding-right:28px;}
    .detail-hero,.next-step{grid-template-columns:1fr;}
    .inc-row{grid-template-columns:1fr;}
    .port-grid,.port-extra{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;}
    .price-grid{grid-template-columns:1fr;}
    .price-card{flex-direction:column;}
    .faq-section{padding:28px;}
  }