:root{
    --green:#15885a; --green-d:#0c6342; --teal:#0e9c86; --blue:#3b82f6;
    --gold:#ef9f27;
    --ink:#eaf3ee; --muted:#9fb3a9; --muted-2:#7d9387;
    --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
    --surface:rgba(255,255,255,.045);
    --r:22px; --r-sm:16px;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{-webkit-text-size-adjust:100%}
  body{
    font-family:'Pretendard',system-ui,-apple-system,'Apple SD Gothic Neo',sans-serif;
    color:var(--ink);
    background:#06120c;
    min-height:100vh;min-height:100dvh;
    -webkit-font-smoothing:antialiased;
    line-height:1.5;
    position:relative;
    overflow-x:hidden;
  }
  /* ambient background */
  .bg{position:fixed;inset:0;z-index:0;pointer-events:none;
    background:
      radial-gradient(900px 540px at 18% -8%, rgba(21,136,90,.42), transparent 60%),
      radial-gradient(760px 520px at 108% 8%, rgba(14,156,134,.30), transparent 58%),
      radial-gradient(900px 700px at 50% 118%, rgba(12,99,66,.5), transparent 60%),
      linear-gradient(180deg,#081a11,#06120c 60%);
  }
  .bg::after{content:"";position:absolute;inset:0;opacity:.5;
    background-image:radial-gradient(rgba(255,255,255,.05) 1px,transparent 1px);
    background-size:22px 22px;mask:radial-gradient(circle at 50% 30%,#000,transparent 75%)}

  .wrap{position:relative;z-index:1;width:100%;max-width:480px;margin:0 auto;
    padding:clamp(34px,7vw,56px) clamp(20px,5vw,28px) 40px;
    display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}

  /* header / brand */
  .brand{display:flex;align-items:center;gap:11px;justify-content:center;margin-bottom:7px}
  .brand-mark{width:46px;height:46px;border-radius:14px;flex-shrink:0;
    background:linear-gradient(150deg,var(--green),var(--green-d));
    display:grid;place-items:center;box-shadow:0 10px 26px rgba(12,99,66,.5),inset 0 1px 0 rgba(255,255,255,.18)}
  .brand-mark svg{width:26px;height:26px}
  .brand-img{height:56px;width:auto;aspect-ratio:3115/1101;background:url("/assets/img-d6619696.png") no-repeat center/contain;display:block}

  .greet{text-align:center;margin-top:22px;margin-bottom:28px}
  .greet-badge{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.02em;color:#9ad9b8;background:rgba(46,214,143,.1);border:1px solid rgba(46,214,143,.26);padding:6px 13px;border-radius:20px;margin-bottom:17px}
  .greet h1{font-size:clamp(1.5rem,5.7vw,1.95rem);font-weight:800;letter-spacing:-.045em;line-height:1.3;word-break:keep-all}
  .greet h1 em{font-style:normal;color:#86e3b9}
  .greet-msg{margin-top:15px;font-size:13.5px;color:var(--muted);line-height:1.74;word-break:keep-all;letter-spacing:-.01em}
  .menu-label{display:flex;align-items:center;gap:13px;margin-bottom:15px;color:var(--muted-2);font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
  .menu-label::before,.menu-label::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line-2),transparent)}

  /* service buttons */
  .menu{display:flex;flex-direction:column;gap:12px}
  .svc{position:relative;display:flex;align-items:center;gap:15px;padding:18px 16px 18px 21px;border-radius:18px;text-decoration:none;color:inherit;overflow:hidden;
    background:rgba(255,255,255,.035);border:1px solid var(--line);
    transition:transform .3s cubic-bezier(.2,.7,.2,1),border-color .3s,background .3s,box-shadow .3s;-webkit-tap-highlight-color:transparent}
  .svc::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--c);box-shadow:0 0 14px var(--c)}
  .svc:hover,.svc:active{transform:translateY(-3px);border-color:var(--c-line);background:var(--c-soft);box-shadow:0 18px 40px rgba(0,0,0,.42)}
  .svc-ico{width:48px;height:48px;flex-shrink:0;display:grid;place-items:center;border-radius:14px;color:var(--c);background:var(--c-bg);border:1px solid var(--c-line)}
  .svc-ico svg{width:25px;height:25px}
  .svc-body{flex:1;min-width:0;display:flex;flex-direction:column}
  .svc-label{font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--c);margin-bottom:3px}
  .svc-name{font-size:17.5px;font-weight:800;letter-spacing:-.035em;color:var(--ink);line-height:1.12}
  .svc-desc{margin-top:5px;font-size:12px;color:var(--muted);letter-spacing:-.01em;word-break:keep-all;line-height:1.45}
  .svc-go{width:34px;height:34px;flex-shrink:0;border-radius:50%;display:grid;place-items:center;color:var(--muted);border:1px solid var(--line);transition:.3s}
  .svc-go svg{width:15px;height:15px}
  .svc:hover .svc-go{background:var(--c);border-color:var(--c);color:#08140d;transform:translateX(2px)}
  .svc.ai{--c:#5b8cff;--c-bg:rgba(91,140,255,.13);--c-line:rgba(91,140,255,.34);--c-soft:rgba(91,140,255,.07)}
  .svc.hr{--c:#2ed68f;--c-bg:rgba(46,214,143,.12);--c-line:rgba(46,214,143,.32);--c-soft:rgba(46,214,143,.06)}
  .svc.sol{--c:#e7ad5a;--c-bg:rgba(231,173,90,.13);--c-line:rgba(231,173,90,.33);--c-soft:rgba(231,173,90,.07)}

  /* footer */
  .foot{margin-top:auto;padding-top:30px;text-align:center;position:relative}
  .foot::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:128px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent)}
  .foot-mark{display:block;width:50px;height:auto;margin:0 auto 14px;opacity:.4}
  .foot-tag{font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:-.01em;word-break:keep-all;margin-bottom:9px}
  .foot-tag b{color:#cfe0d8;font-weight:800}
  .foot-copy{font-size:10.5px;color:var(--muted-2);letter-spacing:.03em}

  /* entrance */
  @media (prefers-reduced-motion:no-preference){
    .reveal{opacity:0;transform:translateY(14px);animation:rise .6s cubic-bezier(.2,.7,.2,1) forwards}
    .d1{animation-delay:.05s}.d2{animation-delay:.13s}.d3{animation-delay:.21s}
    .d4{animation-delay:.29s}.d5{animation-delay:.37s}.d6{animation-delay:.45s}.d7{animation-delay:.53s}
    @keyframes rise{to{opacity:1;transform:none}}
  }
  @media (max-width:380px){
    .svc{padding:15px 14px;gap:12px}
    .svc-ico{width:46px;height:46px}
  }