/* ==================================================================
   C&C Accounting — homepage.

   Same design language as /assets/cc-ui.css (the calculators):
   Roboto, 1360px container, white cards on a light grey ground,
   soft shadows, deep blue for emphasis and teal for positives.

   Namespaced under .h so the main site stylesheet, which still
   supplies the header and footer, is never affected.
   ================================================================== */

.h{
  --bg:#f5f7fa;
  --card:#ffffff;
  --wash:#f7f9fb;
  --wash-2:#eef2f7;

  --ink:#3d4b5c;
  --ink-dk:#1e3a5f;
  --muted:#68778a;
  --faint:#94a1b2;

  --line:#dde4ec;
  --line-2:#e9eef4;

  --blue:#1e3a5f;
  --blue-dk:#152b47;
  --blue-wash:#eef2f8;
  --teal:#0d7377;
  --teal-dk:#0a5c5f;
  --teal-wash:#e8f4f4;

  --sh-sm:0 1px 2px rgba(30,58,95,.06),0 1px 3px rgba(30,58,95,.05);
  --sh:0 1px 3px rgba(30,58,95,.05),0 6px 16px rgba(30,58,95,.07);
  --sh-lg:0 2px 6px rgba(30,58,95,.06),0 14px 34px rgba(30,58,95,.10);

  --r:14px;
  --r-sm:8px;

  --sans:"Roboto",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;

  background:var(--card);
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  font-weight:400;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  display:block;
}
:where(.h) *,:where(.h) *::before,:where(.h) *::after{box-sizing:border-box}
:where(.h) :is(h1,h2,h3,h4){margin:0;color:var(--ink-dk);font-family:var(--sans);font-weight:700;line-height:1.2;letter-spacing:-.015em}
:where(.h) p{margin:0}
:where(.h) a{color:var(--blue)}
.h-in{width:100%;max-width:1360px;margin-inline:auto;padding-inline:32px}
@media (max-width:640px){.h-in{padding-inline:20px}}

.h-sec{padding-block:84px}
.h-sec.h-grey{background:var(--bg)}
@media (max-width:768px){.h-sec{padding-block:56px}}

.h-eyebrow{display:block;font-size:12.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-dk)}
.h-head{max-width:720px;margin-bottom:44px}
.h-head .h-eyebrow{margin-bottom:14px}
.h-head h2{font-size:clamp(28px,3.2vw,40px);margin-bottom:16px}
.h-head p{font-size:17.5px;line-height:1.65;color:var(--muted)}
.h-head.h-center{margin-inline:auto;text-align:center}

/* ---------- buttons ---------- */
.h-btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 30px;
  border:1px solid var(--blue);border-radius:var(--r-sm);background:var(--blue);color:#fff;
  font-family:var(--sans);font-size:16px;font-weight:500;text-decoration:none;white-space:nowrap;
  box-shadow:0 2px 6px rgba(30,58,95,.22);
  transition:background .2s,transform .2s cubic-bezier(.25,.8,.3,1),box-shadow .2s,color .2s,border-color .2s}
.h-btn:hover{background:var(--blue-dk);border-color:var(--blue-dk);transform:translateY(-2px);box-shadow:0 8px 20px rgba(30,58,95,.28)}
.h-btn:active{transform:translateY(0)}
/* on the dark hero the navy fill has almost no contrast; use a light fill */
.h-btn-light{background:#fff;border-color:#fff;color:#12283f;box-shadow:0 6px 20px rgba(0,0,0,.30)}
.h-btn-light:hover{background:var(--teal-wash);border-color:var(--teal-wash);color:var(--teal-dk);
  box-shadow:0 10px 26px rgba(0,0,0,.34)}
.h-btn-ghost{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.42);box-shadow:none}
.h-btn-ghost:hover{background:#fff;color:#12283f;border-color:#fff}
.h-btn-quiet{background:#fff;color:var(--blue);border-color:var(--line);box-shadow:var(--sh-sm)}
.h-btn-quiet:hover{background:#fff;color:var(--blue-dk);border-color:var(--blue)}
.h-link{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:500;
  color:var(--blue);text-decoration:none}
.h-link::after{content:"\2192";transition:transform .2s}
.h-link:hover::after{transform:translateX(4px)}

/* ---------- hero ---------- */
.h-hero{position:relative;isolation:isolate;background:#0a1727;overflow:hidden}
.h-hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:url(/cc-accounting-hero-v2.png) 64% 36%/cover no-repeat}
/* two layers: horizontal for text legibility, vertical to close the edges
   cleanly so the band below meets a solid colour rather than a photo */
.h-hero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(96deg,#081420 0%,rgba(8,20,32,.965) 33%,rgba(8,20,32,.76) 57%,rgba(8,20,32,.30) 100%),
    linear-gradient(180deg,rgba(8,20,32,.55) 0%,rgba(8,20,32,0) 20%,rgba(8,20,32,0) 74%,rgba(8,20,32,.72) 100%)}
.h-hero-in{max-width:1360px;margin-inline:auto;padding:120px 32px 108px}
@media (max-width:900px){.h-hero-in{padding:80px 24px 72px}}
@media (max-width:640px){.h-hero-in{padding:60px 20px 56px}}

.h-hero-tag{display:inline-flex;align-items:center;gap:10px;height:33px;padding:0 17px;border-radius:999px;
  border:1px solid rgba(143,208,212,.34);background:rgba(143,208,212,.10);color:#a6dde0;
  font-size:12px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;margin-bottom:34px}
.h-hero-tag i{flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:#4fb3b8}
@media (max-width:640px){.h-hero-tag{height:auto;padding:7px 14px;letter-spacing:.08em;line-height:1.5;text-align:left}}

.h-hero h1{color:#fff;font-size:clamp(36px,5vw,62px);line-height:1.05;letter-spacing:-.028em;
  text-wrap:balance;max-width:720px;margin-bottom:26px}
.h-hero-lead{color:#c4d5e7;font-size:clamp(16.5px,1.35vw,18.5px);line-height:1.75;max-width:600px;margin-bottom:42px}

.h-hero-cta{display:flex;flex-wrap:wrap;gap:16px;margin-bottom:52px}
@media (max-width:520px){.h-hero-cta{display:grid}.h-hero-cta .h-btn{width:100%}}

/* service list as chips: a run-on middot list wrapped awkwardly */
.h-hero-chips{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin:0;padding:34px 0 0;
  border-top:1px solid rgba(255,255,255,.14);max-width:900px}
.h-hero-chips li{font-size:13.5px;font-weight:400;color:#c0d3e6;
  border:1px solid rgba(255,255,255,.19);background:rgba(255,255,255,.055);
  border-radius:999px;padding:9px 18px;white-space:nowrap;line-height:1.4}
@media (max-width:640px){.h-hero-chips li{font-size:12.5px;padding:6px 13px}}

/* ---------- proof band ---------- */
/* Replaces the old floating stat cards, which the hero's bottom edge sliced
   through. Sits fully below the hero, separated by hairlines. */
.h-proof{background:var(--card);border-bottom:1px solid var(--line-2)}
.h-proof-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding:46px 0}
.h-proof-grid>*{min-width:0}
.h-proof-grid>div{padding-right:34px;border-right:1px solid var(--line-2)}
.h-proof-grid>div+div{padding-left:34px}
.h-proof-grid>div:last-child{border-right:0;padding-right:0}
.h-proof b{display:block;font-size:clamp(22px,2.1vw,29px);font-weight:700;color:var(--teal);
  letter-spacing:-.02em;line-height:1.12;margin-bottom:9px}
.h-proof span{display:block;font-size:14.5px;line-height:1.6;color:var(--muted)}
@media (max-width:900px){
  .h-proof-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 0;padding:36px 0}
  .h-proof-grid>div:nth-child(2n){border-right:0;padding-right:0}
  .h-proof-grid>div:nth-child(2n+1){padding-left:0;padding-right:30px}
  .h-proof-grid>div:nth-child(2n){padding-left:30px}
}
@media (max-width:560px){
  .h-proof-grid{grid-template-columns:minmax(0,1fr);gap:0;padding:8px 0}
  .h-proof-grid>div{border-right:0;padding:22px 0 !important;border-top:1px solid var(--line-2)}
  .h-proof-grid>div:first-child{border-top:0}
}

/* ---------- about split ---------- */
.h-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center}
@media (max-width:960px){.h-split{grid-template-columns:minmax(0,1fr);gap:36px}}
.h-split h2{font-size:clamp(28px,3.2vw,40px);margin-bottom:18px}
.h-split p{font-size:17px;line-height:1.72;color:var(--muted);margin-bottom:16px}
.h-split-media{position:relative}
.h-split-media img{width:100%;height:clamp(320px,38vw,480px);object-fit:cover;display:block;
  border-radius:var(--r);box-shadow:var(--sh-lg)}
.h-split-badge{position:absolute;right:-14px;bottom:-24px;background:var(--card);border:1px solid var(--line-2);
  border-radius:var(--r);box-shadow:var(--sh-lg);padding:20px 24px;max-width:250px}
@media (max-width:960px){.h-split-badge{right:16px;bottom:-20px}}
.h-split-badge b{display:block;font-size:20px;font-weight:700;color:var(--teal);margin-bottom:3px}
.h-split-badge span{display:block;font-size:14px;color:var(--muted);line-height:1.5}
.h-inline-links{display:flex;flex-wrap:wrap;gap:12px 26px;margin-top:26px}

/* ---------- services ---------- */
.h-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media (max-width:1000px){.h-grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.h-grid3{grid-template-columns:minmax(0,1fr)}}
.h-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line-2);
  border-radius:var(--r);box-shadow:var(--sh);padding:30px 30px 28px;text-decoration:none;color:inherit;
  transition:transform .22s cubic-bezier(.25,.8,.3,1),box-shadow .22s}
.h-card:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.h-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:11px;
  background:var(--teal-wash);color:var(--teal);font-size:20px;font-weight:500;margin-bottom:18px}
.h-card h3{font-size:19px;margin-bottom:10px}
.h-card p{font-size:15px;line-height:1.65;color:var(--muted);margin-bottom:18px}
.h-card .h-link{margin-top:auto;font-size:14.5px}

/* ---------- steps ---------- */
.h-steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px;counter-reset:step}
@media (max-width:1000px){.h-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.h-steps{grid-template-columns:minmax(0,1fr)}}
.h-step{position:relative;background:var(--card);border:1px solid var(--line-2);border-radius:var(--r);
  box-shadow:var(--sh-sm);padding:28px 26px 26px}
.h-step::before{counter-increment:step;content:counter(step,decimal-leading-zero);
  display:block;font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--teal);margin-bottom:14px}
.h-step h3{font-size:17.5px;margin-bottom:9px}
.h-step p{font-size:14.5px;line-height:1.65;color:var(--muted)}

/* ---------- why / feature list ---------- */
.h-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
@media (max-width:820px){.h-grid2{grid-template-columns:minmax(0,1fr)}}
.h-feat{display:flex;gap:18px;align-items:flex-start;background:var(--card);border:1px solid var(--line-2);
  border-radius:var(--r);box-shadow:var(--sh-sm);padding:26px 28px}
.h-feat-ico{flex:0 0 auto;display:grid;place-items:center;width:42px;height:42px;border-radius:10px;
  background:var(--blue-wash);color:var(--blue);font-size:17px;font-weight:700}
.h-feat h3{font-size:17.5px;margin-bottom:7px}
.h-feat p{font-size:14.5px;line-height:1.65;color:var(--muted)}

/* ---------- tools teaser ---------- */
.h-tools{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px}
@media (max-width:820px){.h-tools{grid-template-columns:minmax(0,1fr)}}
.h-tool{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line-2);
  border-radius:var(--r);box-shadow:var(--sh);padding:32px 34px 30px;text-decoration:none;color:inherit;
  transition:transform .22s cubic-bezier(.25,.8,.3,1),box-shadow .22s}
.h-tool:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.h-tool .h-eyebrow{margin-bottom:12px}
.h-tool h3{font-size:23px;margin-bottom:10px}
.h-tool p{font-size:15.5px;line-height:1.65;color:var(--muted);margin-bottom:20px}
.h-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.h-chips i{font-style:normal;font-size:13px;font-weight:500;color:var(--muted);background:var(--wash-2);
  border-radius:999px;padding:6px 13px}

/* ---------- resources teaser ---------- */
.h-post{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line-2);
  border-radius:var(--r);box-shadow:var(--sh-sm);overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .22s cubic-bezier(.25,.8,.3,1),box-shadow .22s}
.h-post:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.h-post-img{aspect-ratio:16/9;overflow:hidden;background:var(--wash-2)}
.h-post-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.25,.8,.3,1)}
.h-post:hover .h-post-img img{transform:scale(1.05)}
.h-post-body{display:flex;flex-direction:column;flex:1;padding:24px 26px 26px}
.h-tag{display:inline-block;font-size:11.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--teal-dk);margin-bottom:10px}
.h-post h3{font-size:17.5px;line-height:1.35;margin-bottom:10px}
.h-post p{font-size:14.5px;line-height:1.6;color:var(--muted);margin-bottom:16px}
.h-post-meta{margin-top:auto;font-size:13px;color:var(--faint)}

/* ---------- closing CTA ---------- */
.h-cta{position:relative;isolation:isolate;background:var(--blue);overflow:hidden}
.h-cta::before{content:"";position:absolute;inset:0;z-index:-2;
  background:url(/cc-accounting-online-consultation.png) 50% 42%/cover no-repeat}
.h-cta::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,rgba(21,43,71,.96) 0%,rgba(21,43,71,.9) 46%,rgba(21,43,71,.62) 100%)}
.h-cta-in{max-width:1360px;margin-inline:auto;padding:84px 32px}
@media (max-width:768px){.h-cta-in{padding:56px 20px}}
.h-cta h2{color:#fff;font-size:clamp(28px,3.2vw,40px);max-width:680px;margin-bottom:16px}
.h-cta p{color:#c3d3e6;font-size:17px;line-height:1.7;max-width:620px;margin-bottom:30px}
.h-cta-actions{display:flex;flex-wrap:wrap;gap:14px}
@media (max-width:520px){.h-cta-actions{display:grid}.h-cta-actions .h-btn{width:100%}}
.h-cta-actions .h-btn:first-child{background:#fff;color:var(--blue);border-color:#fff}
.h-cta-actions .h-btn:first-child:hover{background:var(--teal-wash);border-color:var(--teal-wash);color:var(--blue-dk)}

/* ---------- entrance motion ---------- */
.h-rise{opacity:0;transform:translateY(14px)}
.h-rise.is-in{opacity:1;transform:none;transition:opacity .55s ease,transform .55s cubic-bezier(.25,.8,.3,1)}
@media (prefers-reduced-motion:reduce){
  .h-rise,.h-rise.is-in{opacity:1;transform:none;transition:none}
  .h-card,.h-tool,.h-post,.h-btn,.h-post-img img{transition:none}
  .h-card:hover,.h-tool:hover,.h-post:hover,.h-btn:hover{transform:none}
}

/* ---------- Chinese rhythm ---------- */
/* CJK sets tighter than Latin at the same size, so headings need positive
   tracking and blocks need more separation to read as comfortably. */
:root[data-lang="zh"] .h-hero h1{letter-spacing:.01em;line-height:1.28;margin-bottom:30px}
:root[data-lang="zh"] .h-hero-lead{line-height:1.95;max-width:620px;margin-bottom:46px}
:root[data-lang="zh"] .h-hero-tag{letter-spacing:.06em;margin-bottom:36px}
:root[data-lang="zh"] .h-hero-chips{padding-top:36px;gap:12px}
:root[data-lang="zh"] .h-hero-chips li{padding:9px 20px;letter-spacing:.02em}
:root[data-lang="zh"] .h-proof b{letter-spacing:0;line-height:1.35;margin-bottom:11px}
:root[data-lang="zh"] .h-proof span{line-height:1.85}
:root[data-lang="zh"] .h-head h2,
:root[data-lang="zh"] .h-split h2,
:root[data-lang="zh"] .h-cta h2,
:root[data-lang="zh"] .h-band h2{letter-spacing:.01em;line-height:1.42}
:root[data-lang="zh"] .h-head p,
:root[data-lang="zh"] .h-split p{line-height:1.95}
:root[data-lang="zh"] .h-card p,
:root[data-lang="zh"] .h-step p,
:root[data-lang="zh"] .h-feat p,
:root[data-lang="zh"] .h-tool p,
:root[data-lang="zh"] .h-post p{line-height:1.85}
:root[data-lang="zh"] .h-card h3,
:root[data-lang="zh"] .h-step h3,
:root[data-lang="zh"] .h-feat h3{line-height:1.5;margin-bottom:12px}