/* ============================================================
   CareBridge Asia Limited — shared stylesheet
   ============================================================ */
:root{
  --bg:#0A1114;
  --bg2:#0E181D;
  --panel:rgba(255,255,255,.028);
  --line:rgba(232,238,236,.09);
  --line-strong:rgba(232,238,236,.2);
  --text:#E9EFED;
  --sub:#8CA0A3;
  --mint:#37D6B5;
  --gold:#D9B36E;
  --maxw:1120px;
  --ff-latin:'Manrope',sans-serif;
  --ff-jp:'Zen Kaku Gothic New','Noto Sans TC','Manrope',sans-serif;
  --ff-zh:'Noto Sans TC','Zen Kaku Gothic New','Manrope',sans-serif;
  --ff-mono:'IBM Plex Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--bg);color:var(--text);
  font-family:var(--ff-jp);
  font-size:16px;line-height:1.9;letter-spacing:.015em;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
html[data-lang="en"] body{font-family:var(--ff-latin);line-height:1.7;letter-spacing:0}
html[data-lang="zh"] body{font-family:var(--ff-zh);line-height:1.85}
[data-l]{display:none}
html[data-lang="ja"] [data-l="ja"]{display:revert}
html[data-lang="en"] [data-l="en"]{display:revert}
html[data-lang="zh"] [data-l="zh"]{display:revert}
a{color:inherit}
::selection{background:var(--mint);color:#06110E}
img{max-width:100%;display:block}

/* ambient glow */
.glow{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(52vw 42vh at 78% -6%, rgba(55,214,181,.10), transparent 62%),
    radial-gradient(46vw 38vh at 8% 108%, rgba(217,179,110,.06), transparent 60%),
    var(--bg);
}

.eyebrow{font-family:var(--ff-mono);font-size:11.5px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--mint);display:flex;align-items:center;gap:14px;margin-bottom:20px}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--mint);opacity:.7}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:60;background:rgba(10,17,20,.72);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav{max-width:var(--maxw);margin:0 auto;padding:16px 28px;display:flex;align-items:center;gap:22px}
.logo{font-family:var(--ff-latin);font-weight:800;font-size:16px;letter-spacing:.06em;
  text-decoration:none;display:flex;align-items:center;gap:10px;white-space:nowrap}
.logo b{color:var(--mint)}
.nav-links{margin-left:auto;display:flex;gap:24px;align-items:center}
.nav-links a{color:var(--sub);text-decoration:none;font-size:13px;font-weight:500;
  letter-spacing:.04em;transition:color .25s;padding:4px 0;border-bottom:1px solid transparent}
.nav-links a:hover{color:var(--text)}
.nav-links a.current{color:var(--text);border-bottom-color:var(--mint)}
.lang-toggle{display:flex;border:1px solid var(--line-strong);border-radius:99px;overflow:hidden;flex-shrink:0}
.lang-toggle button{border:0;background:transparent;padding:6px 12px;cursor:pointer;
  font-family:var(--ff-mono);font-size:11px;color:var(--sub);transition:.25s}
.lang-toggle button[aria-pressed="true"]{background:var(--mint);color:#06110E;font-weight:500}
.lang-toggle button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
@media(max-width:860px){
  .nav{flex-wrap:wrap;gap:14px;padding:14px 20px}
  .nav-links{order:3;width:100%;margin-left:0;gap:18px;overflow-x:auto;padding-bottom:2px}
  .nav-links a{font-size:12.5px;white-space:nowrap}
  .lang-toggle{margin-left:auto}
}

/* ---------- hero ---------- */
.hero{max-width:var(--maxw);margin:0 auto;padding:104px 28px 26px}
.hero.sub{padding:76px 28px 20px}
.hero h1{font-family:var(--ff-jp);font-weight:900;
  font-size:clamp(32px,6.2vw,68px);line-height:1.22;letter-spacing:.01em;max-width:17em}
html[data-lang="en"] .hero h1{font-family:var(--ff-latin);font-weight:800;line-height:1.08;letter-spacing:-.02em}
html[data-lang="zh"] .hero h1{font-family:var(--ff-zh);line-height:1.25}
.hero.sub h1{font-size:clamp(28px,4.6vw,46px)}
.hero h1 .grad{background:linear-gradient(92deg,var(--mint) 10%,#9BE8D6 55%,var(--gold) 105%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.hero p.lead{margin-top:26px;max-width:36em;color:var(--sub);font-size:clamp(15px,1.7vw,17px)}
.cta-row{margin-top:36px;display:flex;gap:14px;flex-wrap:wrap}
.btn{display:inline-block;text-decoration:none;font-size:13.5px;font-weight:700;letter-spacing:.05em;
  padding:13px 26px;border-radius:99px;transition:.3s;border:1px solid transparent;cursor:pointer}
.btn-mint{background:var(--mint);color:#06110E}
.btn-mint:hover{box-shadow:0 0 34px rgba(55,214,181,.35);transform:translateY(-1px)}
.btn-ghost{border-color:var(--line-strong);color:var(--text);background:transparent}
.btn-ghost:hover{border-color:var(--mint);color:var(--mint)}

/* bridge signature */
.bridge{max-width:var(--maxw);margin:22px auto 0;padding:0 28px 64px}
.bridge svg{width:100%;height:auto;display:block}
.arc{stroke:url(#arcgrad);stroke-width:2.6;fill:none;
  stroke-dasharray:1200;stroke-dashoffset:1200;animation:draw 2.4s .3s cubic-bezier(.6,0,.2,1) forwards}
.cable{stroke:rgba(55,214,181,.35);stroke-width:1;opacity:0;animation:fadein 1s 1.6s forwards}
.deck{stroke:var(--line-strong);stroke-width:1.4}
.node{fill:var(--gold)}
.blab{font-family:var(--ff-mono);font-size:11px;fill:var(--sub);letter-spacing:.18em}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadein{to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .arc{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
  .cable{opacity:1;animation:none}
  .fade{transition:none!important;opacity:1!important;transform:none!important}
}

/* ---------- sections ---------- */
section{max-width:var(--maxw);margin:0 auto;padding:84px 28px}
section.tight{padding:56px 28px}
h2{font-weight:900;font-size:clamp(23px,3.3vw,36px);line-height:1.3;margin-bottom:14px}
html[data-lang="en"] h2{font-family:var(--ff-latin);font-weight:800;letter-spacing:-.015em}
.sec-note{color:var(--sub);max-width:42em;margin-bottom:46px;font-size:15px}

/* service rows */
.svc{border-top:1px solid var(--line)}
.svc-row{display:grid;grid-template-columns:56px minmax(200px,310px) 1fr 30px;gap:24px;align-items:start;
  padding:32px 10px;border-bottom:1px solid var(--line);
  transition:background .35s,padding-left .35s;position:relative;text-decoration:none;color:inherit}
.svc-row:hover{background:var(--panel);padding-left:22px}
.svc-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--mint);
  transform:scaleY(0);transition:transform .35s;transform-origin:top}
.svc-row:hover::before{transform:scaleY(1)}
.svc-idx{font-family:var(--ff-mono);font-size:12px;color:var(--sub);padding-top:6px;letter-spacing:.1em}
.svc-row h3{font-size:18px;font-weight:700;line-height:1.5}
html[data-lang="en"] .svc-row h3{font-family:var(--ff-latin)}
.chip{display:inline-block;margin-top:10px;font-family:var(--ff-mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);border:1px solid rgba(217,179,110,.35);border-radius:99px;padding:3px 12px}
.chip.core{color:#06110E;background:var(--mint);border-color:var(--mint)}
.svc-row p{color:var(--sub);font-size:14.5px;max-width:54em}
.svc-arrow{color:var(--mint);opacity:0;transition:.35s;padding-top:8px;font-family:var(--ff-latin)}
.svc-row:hover .svc-arrow{opacity:1;transform:translateX(4px)}
@media(max-width:820px){
  .svc-row{grid-template-columns:1fr;gap:10px;padding:26px 6px}
  .svc-idx{padding:0}.svc-arrow{display:none}
}

/* detail blocks (services page) */
.detail{border-top:1px solid var(--line);padding:56px 0;scroll-margin-top:90px}
.detail:last-of-type{border-bottom:1px solid var(--line)}
.detail-head{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;margin-bottom:8px}
.detail-head .num{font-family:var(--ff-mono);font-size:12px;color:var(--mint);letter-spacing:.2em}
.detail h3{font-size:clamp(20px,2.6vw,27px);font-weight:800;line-height:1.35}
html[data-lang="en"] .detail h3{font-family:var(--ff-latin)}
.detail .intro{color:var(--sub);font-size:15px;margin:14px 0 26px;max-width:46em}
.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line)}
.feat>div{background:var(--bg2);padding:22px 20px}
.feat h4{font-size:14.5px;font-weight:700;margin-bottom:8px;color:var(--mint)}
html[data-lang="en"] .feat h4{font-family:var(--ff-latin)}
.feat p{font-size:13.5px;color:var(--sub);line-height:1.8}
.meta{display:flex;gap:30px;flex-wrap:wrap;margin-top:24px;font-size:13px;color:var(--sub)}
.meta b{color:var(--text);font-weight:700;display:block;font-family:var(--ff-mono);font-size:10.5px;
  letter-spacing:.2em;text-transform:uppercase;margin-bottom:5px}

/* approach cards */
.appr{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.appr>div{background:var(--bg2);padding:34px 28px;transition:background .35s}
.appr>div:hover{background:#122026}
.appr h3{font-size:16px;font-weight:700;margin-bottom:12px;color:var(--mint)}
html[data-lang="en"] .appr h3{font-family:var(--ff-latin)}
.appr p{font-size:14px;color:var(--sub)}
.appr .k{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.24em;color:var(--gold);
  text-transform:uppercase;display:block;margin-bottom:16px}
@media(max-width:760px){.appr{grid-template-columns:1fr}}

/* tables */
.cinfo{width:100%;border-collapse:collapse;max-width:780px}
.cinfo th,.cinfo td{text-align:left;padding:15px 16px;font-size:14.5px;
  border-bottom:1px solid var(--line);vertical-align:top}
.cinfo th{width:215px;color:var(--sub);font-weight:500;font-family:var(--ff-mono);font-size:11.5px;
  letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;padding-top:18px}
@media(max-width:560px){.cinfo th{width:110px;letter-spacing:.05em;font-size:10.5px}
  .cinfo th,.cinfo td{padding:12px 8px;font-size:13.5px}}

/* prose */
.prose p{color:var(--sub);max-width:44em;margin-bottom:18px;font-size:15px}
.prose p strong{color:var(--text);font-weight:700}

/* contact */
.contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:54px;align-items:start}
@media(max-width:840px){.contact-grid{grid-template-columns:1fr;gap:40px}}
form label{display:block;font-family:var(--ff-mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--sub);margin:22px 0 8px}
form input,form select,form textarea{
  width:100%;background:var(--bg2);border:1px solid var(--line-strong);border-radius:6px;
  color:var(--text);font-family:inherit;font-size:15px;padding:12px 14px;transition:border-color .25s}
form textarea{min-height:150px;resize:vertical;line-height:1.7}
form input:focus,form select:focus,form textarea:focus{outline:none;border-color:var(--mint)}
form select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--sub) 50%),linear-gradient(135deg,var(--sub) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%,calc(100% - 14px) 55%;background-size:6px 6px,6px 6px;background-repeat:no-repeat}
form option{background:var(--bg2);color:var(--text)}
form .req{color:var(--mint)}
form button{margin-top:28px}
.note{font-size:12.5px;color:var(--sub);margin-top:16px;line-height:1.8}
.side-card{background:var(--bg2);border:1px solid var(--line);padding:28px 26px}
.side-card h3{font-size:15px;font-weight:700;margin-bottom:16px;color:var(--mint)}
.side-card dl{font-size:14px}
.side-card dt{font-family:var(--ff-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--sub);margin-top:16px}
.side-card dt:first-child{margin-top:0}
.side-card dd{margin-top:5px;line-height:1.7}
.side-card a{color:var(--mint);text-decoration:none;word-break:break-all}
.side-card a:hover{text-decoration:underline}

/* cta band */
.band{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg2)}
.band-in{max-width:var(--maxw);margin:0 auto;padding:54px 28px;display:flex;
  justify-content:space-between;align-items:center;gap:26px;flex-wrap:wrap}
.band h2{margin-bottom:6px;font-size:clamp(20px,2.6vw,28px)}
.band p{color:var(--sub);font-size:14.5px}

footer{border-top:1px solid var(--line)}
.foot{max-width:var(--maxw);margin:0 auto;padding:34px 28px;display:flex;justify-content:space-between;
  gap:16px;flex-wrap:wrap;color:var(--sub);font-size:12.5px;font-family:var(--ff-mono)}
.foot a{color:var(--sub);text-decoration:none}
.foot a:hover{color:var(--mint)}

.fade{opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}
.fade.in{opacity:1;transform:none}

/* ---------- product identity (name + icon) ---------- */
.svc-prod{display:flex;align-items:center;gap:13px}
.svc-prod img{width:46px;height:46px;border-radius:12px;flex-shrink:0;display:block}
.svc-cat{font-size:12.5px;color:var(--sub);margin-top:4px;line-height:1.5}
html[data-lang="ja"] .svc-cat[data-l="ja"],
html[data-lang="en"] .svc-cat[data-l="en"],
html[data-lang="zh"] .svc-cat[data-l="zh"]{display:block}
.detail-head .picon{width:54px;height:54px;border-radius:14px;display:block;flex-shrink:0}
.detail-head{align-items:center}
.detail-sub{font-size:14px;color:var(--sub);margin:-2px 0 0}
@media(max-width:820px){
  .svc-prod img{width:40px;height:40px}
  .detail-head .picon{width:44px;height:44px}
}