/* ============================================================
   CCCI · Canadian Crypto Capital INC.
   Visual system — North-American institutional / hedge-fund.
   White-dominant paper, deep-navy hero & footer, champagne-gold
   hairline accents. Refined serif display, clean sans body.
   Vanilla CSS, no third-party dependencies.
   ============================================================ */

:root{
  --ink:#0E1A2B;        /* deep navy — hero / footer / dark bands */
  --ink-2:#122036;
  --ink-3:#182A42;
  --paper:#FFFFFF;      /* base white */
  --paper-2:#F6F6F2;    /* warm-neutral alt band */
  --gold:#B08D4F;       /* champagne/bronze accent (legible on white) */
  --gold-2:#C8A96A;
  --gold-deep:#8A6D34;
  --on-dark:#EDEFF3;
  --muted-dark:#9AA6B6;
  --on-light:#0E1A2B;
  --muted-light:#5A6472;
  --line-dark:rgba(255,255,255,.14);
  --line-light:rgba(14,26,43,.14);
  --ink-line:rgba(14,26,43,.09);
  --warn:#9E6B1E;
  --bad:#9E4130;
  --ok:#3C7A61;
  --maxw:1200px;
  --radius:4px;
  --shadow:0 1px 2px rgba(14,26,43,.05);
  --serif:Georgia,"Times New Roman","Source Han Serif SC","Songti SC","STSong",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--on-light);
  background:var(--paper);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.2;letter-spacing:.1px;margin:0;}
p{margin:0 0 1em;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 26px;}

/* ---------- language spans ---------- */
.zh,.en,.fr{transition:opacity .15s ease;}
body[data-lang="zh"] .en,body[data-lang="zh"] .fr{display:none;}
body[data-lang="en"] .zh,body[data-lang="en"] .fr{display:none;}
body[data-lang="fr"] .zh,body[data-lang="fr"] .en{display:none;}

/* ---------- sprite ---------- */
.sprite{position:absolute;width:0;height:0;overflow:hidden;}
.brand-logo{width:30px;height:30px;flex:0 0 auto;}
.ico-16{width:16px;height:16px;vertical-align:-3px;margin-right:6px;}
.ico-18{width:18px;height:18px;}
.ico-20{width:20px;height:20px;}

/* ---------- header (white) ---------- */
.site-head{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(120%) blur(8px);
  -webkit-backdrop-filter:saturate(120%) blur(8px);
  border-bottom:1px solid var(--line-light);
  color:var(--on-light);
}
.site-head .wrap{display:flex;align-items:center;gap:22px;height:68px;}
.brand{display:flex;align-items:center;gap:11px;}
.brand-logo{color:var(--gold);}
.brand-txt{display:flex;flex-direction:column;line-height:1.1;}
.brand-mark{font-family:var(--serif);font-weight:700;font-size:18px;letter-spacing:1.6px;color:var(--ink);}
.brand-sub{font-size:10.5px;letter-spacing:.7px;color:var(--muted-light);text-transform:uppercase;}
.main-nav{display:flex;gap:2px;margin-left:auto;}
.main-nav a{
  padding:9px 13px;border-radius:3px;font-size:14px;color:var(--muted-light);
  transition:color .15s,background .15s;white-space:nowrap;
}
.main-nav a:hover{color:var(--ink);background:rgba(14,26,43,.04);}
.main-nav a[aria-current="page"]{color:var(--ink);font-weight:600;}
.main-nav a[aria-current="page"]::after{
  content:"";display:block;height:2px;background:var(--gold);margin-top:5px;
}
.lang-toggle{display:flex;border:1px solid var(--line-light);border-radius:3px;overflow:hidden;}
.lang-toggle button{
  background:transparent;border:0;color:var(--muted-light);font:inherit;font-size:13px;
  padding:7px 12px;cursor:pointer;transition:background .15s,color .15s;
}
.lang-toggle button[aria-pressed="true"]{background:var(--ink);color:#fff;font-weight:600;}
.nav-toggle{display:none;background:transparent;border:1px solid var(--line-light);border-radius:3px;
  color:var(--ink);width:42px;height:38px;cursor:pointer;align-items:center;justify-content:center;}
.nav-toggle span{display:block;width:18px;height:2px;background:var(--ink);position:relative;}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:18px;height:2px;background:var(--ink);}
.nav-toggle span::before{top:-6px;}.nav-toggle span::after{top:6px;}

/* ---------- hero (deep navy) ---------- */
.hero{
  position:relative;overflow:hidden;color:var(--on-dark);
  background:linear-gradient(180deg,var(--ink) 0%,var(--ink-2) 100%);
}
/* home hero — real photo backdrop (free Pexels image), deeply neutralised */
.hero.hero--city{
  background-image:
    linear-gradient(180deg,rgba(14,26,43,.90),rgba(16,30,50,.96)),
    url(assets/img/city-beijing.jpg);
  background-size:auto,cover;
  background-position:center,center;
  background-repeat:no-repeat;
}
.hero .wrap{position:relative;padding:92px 26px 84px;}
.hero-grid{display:grid;grid-template-columns:1.35fr .9fr;gap:56px;align-items:center;}
.idline{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;color:#C3CCD9;
  border:1px solid var(--line-dark);border-radius:999px;padding:6px 14px;margin-bottom:24px;letter-spacing:.4px;text-transform:uppercase;}
.idline .dot{width:6px;height:6px;border-radius:50%;background:var(--gold-2);}
.hero h1{font-size:clamp(32px,4.6vw,54px);line-height:1.12;margin-bottom:22px;color:#fff;letter-spacing:-.2px;}
.hero h1 .accent{color:var(--gold-2);}
.lead{font-size:17px;color:#C3CCD9;max-width:60ch;margin-bottom:28px;}
.btn-row{display:flex;flex-wrap:wrap;gap:14px;margin-top:6px;}
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 24px;border-radius:3px;font-weight:600;font-size:14.5px;letter-spacing:.02em;
  background:var(--ink);color:#fff;border:1px solid var(--ink);
  transition:transform .12s ease,background .15s ease,border-color .15s,color .15s;
}
.btn:hover{transform:translateY(-1px);background:#1B2C45;border-color:#1B2C45;}
/* on the dark hero we invert the primary button to champagne gold */
.hero .btn{background:var(--gold);color:var(--ink);border-color:var(--gold);}
.hero .btn:hover{background:var(--gold-2);border-color:var(--gold-2);}
.btn.ghost{background:transparent;color:var(--ink);border-color:rgba(14,26,43,.30);}
.btn.ghost:hover{border-color:var(--gold);color:var(--gold-deep);background:transparent;}
.hero .btn.ghost,section.dark .btn.ghost{color:var(--on-dark);border-color:rgba(255,255,255,.34);}
.hero .btn.ghost:hover,section.dark .btn.ghost:hover{border-color:var(--gold-2);color:var(--gold-2);}

/* hero side panel — system schematic */
.pipe{
  background:rgba(255,255,255,.03);
  border:1px solid var(--line-dark);border-radius:var(--radius);
  padding:22px 22px 18px;
}
.pipe-h{display:flex;align-items:center;justify-content:space-between;color:#fff;font-family:var(--serif);font-size:16px;margin-bottom:14px;}
.pipe-h svg{color:var(--gold-2);}
.pipe-node{display:flex;gap:12px;align-items:flex-start;padding:9px 0;}
.nd-ic{flex:0 0 auto;width:36px;height:36px;border-radius:3px;display:grid;place-items:center;
  background:rgba(200,169,106,.12);color:var(--gold-2);border:1px solid var(--line-dark);}
.pipe-node.gate .nd-ic{background:rgba(200,169,106,.18);color:var(--gold-2);}
.nd-t{color:#EDEFF3;font-weight:600;font-size:14.5px;margin:0;}
.nd-d{color:var(--muted-dark);font-size:13px;margin:2px 0 0;}
.pipe-link{height:14px;width:2px;background:var(--line-dark);margin-left:17px;}
.pipe-foot{margin-top:10px;font-size:12px;color:var(--muted-dark);border-top:1px solid var(--line-dark);padding-top:10px;}

/* ---------- stats strip (light) ---------- */
.stats{
  background:var(--paper);color:var(--on-light);
  border-top:1px solid var(--line-light);border-bottom:1px solid var(--line-light);
}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:34px 26px;}
.stat{padding:8px 22px;border-left:1px solid var(--line-light);}
.stat:first-child{border-left:0;padding-left:0;}
.stat .v{font-family:var(--serif);font-size:clamp(26px,3vw,36px);color:var(--ink);line-height:1;margin-bottom:8px;}
.stat .v small{font-size:.5em;color:var(--gold-deep);margin-left:3px;}
.stat .k{font-size:13px;color:var(--muted-light);letter-spacing:.3px;}

/* ---------- generic sections (light) ---------- */
section{padding:84px 0;}
section.dark{background:var(--ink);color:var(--on-dark);}
section.dark h2{color:#fff;}
section.dark .muted{color:var(--muted-dark);}
section.alt{background:var(--paper-2);}
.eyebrow{
  display:inline-flex;align-items:center;gap:7px;font-size:12px;font-weight:700;
  letter-spacing:1.8px;text-transform:uppercase;color:var(--gold-deep);margin-bottom:14px;
}
section.dark .eyebrow{color:var(--gold-2);}
section.dark .eyebrow svg{color:var(--gold-2);}
h2{font-size:clamp(24px,3vw,34px);margin-bottom:18px;color:var(--on-light);}
.muted{color:var(--muted-light);}
section.dark .muted{color:var(--muted-dark);}
.small{font-size:14px;color:var(--muted-light);}
section.dark .small{color:var(--muted-dark);}
.lead-blk{font-size:18px;color:#3A4352;max-width:64ch;margin-bottom:8px;}
section.dark .lead-blk{color:#C3CCD9;}

/* ---------- split & grids ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
.grid{display:grid;gap:22px;margin-top:26px;}
.g2{grid-template-columns:1fr 1fr;}
.g3{grid-template-columns:repeat(3,1fr);}
@media(max-width:880px){.g3{grid-template-columns:1fr;}.split{grid-template-columns:1fr;gap:30px;}}

/* ---------- cards ---------- */
.card{
  background:var(--paper);border:1px solid var(--line-light);border-radius:var(--radius);
  padding:28px 24px;position:relative;box-shadow:var(--shadow);
  transition:border-color .15s ease,box-shadow .15s ease,transform .14s ease;
}
.card:hover{transform:translateY(-2px);border-color:rgba(176,141,79,.55);box-shadow:0 6px 20px rgba(14,26,43,.08);}
.card h3{font-size:19px;margin-bottom:8px;color:var(--on-light);}
.card .muted{font-size:14.5px;}
section.dark .card{background:var(--ink-3);border-color:var(--line-dark);box-shadow:none;}
section.dark .card h3{color:#fff;}
section.dark .card .muted{color:var(--muted-dark);}
section.dark .card:hover{border-color:rgba(200,169,106,.5);}
.card-ic{width:42px;height:42px;border-radius:3px;display:grid;place-items:center;margin-bottom:16px;
  background:rgba(176,141,79,.12);color:var(--gold-deep);}
.card-ic.ghost{background:rgba(176,141,79,.16);color:var(--gold-deep);}
.card-ic.warn{background:rgba(158,107,30,.14);color:var(--warn);}
section.dark .card-ic{background:rgba(200,169,106,.14);color:var(--gold-2);}
section.dark .card-ic.ghost{background:rgba(200,169,106,.18);color:var(--gold-2);}
.num{position:absolute;top:18px;right:20px;font-family:var(--serif);font-size:30px;color:rgba(14,26,43,.08);}
section.dark .num{color:rgba(255,255,255,.07);}

/* ---------- definition list ---------- */
.deflist{margin:0;}
.deflist>div{display:flex;gap:18px;padding:15px 0;border-bottom:1px solid var(--line-light);}
.deflist>div:last-child{border-bottom:0;}
.deflist dt{flex:0 0 130px;font-weight:600;color:var(--on-light);font-size:14.5px;}
.deflist dd{margin:0;color:var(--muted-light);font-size:15px;}
section.dark .deflist>div{border-color:var(--line-dark);}
section.dark .deflist dt{color:#EDEFF3;}
section.dark .deflist dd{color:var(--muted-dark);}

/* ---------- note / legend ---------- */
.note{
  border-left:2px solid var(--gold);background:rgba(176,141,79,.08);
  padding:18px 20px;border-radius:0;margin-top:24px;font-size:15px;color:#3A4352;
}
section.dark .note{color:#C3CCD9;background:rgba(200,169,106,.08);}
.legend{
  border:1px solid var(--line-light);border-radius:var(--radius);padding:15px 18px;margin-top:22px;
  font-size:14px;color:var(--muted-light);background:rgba(14,26,43,.02);
}
section.dark .legend{border-color:var(--line-dark);color:var(--muted-dark);background:rgba(255,255,255,.02);}

/* ---------- figures ---------- */
.fig{margin:0;}
.fig-media{position:relative;overflow:hidden;border-radius:var(--radius);border:1px solid var(--line-light);background:#E7E9EE;box-shadow:var(--shadow);}
section.dark .fig-media{border-color:var(--line-dark);background:var(--ink-3);box-shadow:none;}
.fig-media img{width:100%;aspect-ratio:16/10;object-fit:cover;height:auto;filter:saturate(.92) contrast(1.02);}
/* standalone photo band between sections */
.fignote{padding:14px 0;}
.fignote .fig-media{max-width:100%;}
.fig-tag{position:absolute;left:12px;bottom:12px;background:rgba(14,26,43,.78);color:#EDEFF3;
  font-size:11.5px;letter-spacing:.5px;padding:4px 10px;border-radius:3px;}
figcaption{font-size:14px;color:var(--muted-light);margin-top:12px;line-height:1.55;}
.credit{display:block;margin-top:6px;font-size:12px;color:#98A2B3;font-style:italic;}
section.dark figcaption{color:var(--muted-dark);}

/* ---------- risk list ---------- */
.risk-list{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:14px;}
.risk-list li{position:relative;padding-left:34px;color:#C3CCD9;font-size:15.5px;line-height:1.6;}
.risk-list li::before{
  content:"";position:absolute;left:0;top:7px;width:20px;height:20px;border-radius:50%;
  background:rgba(158,107,30,.16);box-shadow:inset 0 0 0 1.5px var(--warn);
}
.risk-list li::after{content:"";position:absolute;left:7px;top:13px;width:6px;height:6px;border-radius:50%;background:var(--warn);}

/* ---------- investor / feature rows ---------- */
.frow{display:grid;grid-template-columns:auto 1fr;gap:18px;padding:23px 0;border-bottom:1px solid var(--line-light);align-items:start;}
.frow:last-child{border-bottom:0;}
.frow .fi{width:46px;height:46px;border-radius:3px;display:grid;place-items:center;background:rgba(176,141,79,.12);color:var(--gold-deep);}
.frow h3{font-size:18px;margin-bottom:5px;}
.frow p{margin:0;color:var(--muted-light);font-size:14.5px;}
section.dark .frow{border-color:var(--line-dark);}
section.dark .frow .fi{background:rgba(200,169,106,.14);color:var(--gold-2);}
section.dark .frow p{color:var(--muted-dark);}

/* ---------- steps ---------- */
.steps{counter-reset:s;display:grid;gap:0;margin-top:24px;}
.step{display:grid;grid-template-columns:54px 1fr;gap:18px;padding:21px 0;border-bottom:1px solid var(--line-light);}
.step:last-child{border-bottom:0;}
.step .si{counter-increment:s;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--serif);font-size:17px;background:var(--paper);color:var(--ink);border:1px solid var(--line-light);}
.step .si::before{content:counter(s,decimal-leading-zero);}
.step h3{font-size:17px;margin-bottom:4px;}
.step p{margin:0;color:var(--muted-light);font-size:14.5px;}
section.dark .step{border-color:var(--line-dark);}
section.dark .step p{color:var(--muted-dark);}
section.dark .step .si{background:var(--ink-3);color:var(--gold-2);border-color:var(--line-dark);}

/* ---------- contact cards ---------- */
.office{background:var(--paper);border:1px solid var(--line-light);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);}
section.dark .office{background:var(--ink-3);border-color:var(--line-dark);box-shadow:none;}
.office h3{font-size:18px;margin-bottom:4px;}
.office .tag{font-size:12px;color:var(--gold-deep);text-transform:uppercase;letter-spacing:1.2px;font-weight:700;}
section.dark .office .tag{color:var(--gold-2);}
.office p{font-size:14.5px;color:var(--muted-light);margin:6px 0 0;}
section.dark .office p{color:var(--muted-dark);}

/* ---------- form ---------- */
.form{display:grid;gap:16px;max-width:560px;}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:13px;color:var(--muted-light);font-weight:600;}
section.dark .field label{color:var(--muted-dark);}
.field input,.field textarea,.field select{
  font:inherit;padding:11px 13px;border-radius:3px;border:1px solid var(--line-light);
  background:#fff;color:var(--on-light);
}
section.dark .field input,section.dark .field textarea,section.dark .field select{
  background:var(--ink-2);border-color:var(--line-dark);color:var(--on-dark);
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(176,141,79,.15);}
@media(max-width:560px){.form .row{grid-template-columns:1fr;}}

/* ---------- placeholder (to be filled by owner) ---------- */
.ph{color:var(--gold-deep);border-bottom:1px dotted var(--gold-deep);cursor:help;}
section.dark .ph{color:var(--gold-2);border-bottom-color:var(--gold-2);}
.ph::before{content:"【";}
.ph::after{content:"】";}

/* ---------- footer (deep navy) ---------- */
.site-foot{background:var(--ink);color:var(--on-dark);padding:60px 0 28px;}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;}
.foot-brand{display:flex;gap:11px;align-items:center;margin-bottom:14px;}
.foot-brand svg{width:30px;height:30px;}
.foot-brand b{font-family:var(--serif);color:#fff;font-size:16px;letter-spacing:1px;}
.foot-brand span{display:block;font-size:11px;color:var(--muted-dark);text-transform:uppercase;letter-spacing:.5px;}
.site-foot h4{font-family:var(--sans);font-size:12px;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted-dark);margin:0 0 12px;font-weight:700;}
.site-foot p{font-size:14px;color:#B7C0CE;margin:5px 0;}
.site-foot a{color:#B7C0CE;transition:color .15s;}
.site-foot a:hover{color:var(--gold-2);}
.foot-legal{margin-top:34px;padding-top:22px;border-top:1px solid var(--line-dark);font-size:12.5px;color:var(--muted-dark);line-height:1.6;}
.foot-bot{margin-top:18px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:12.5px;color:var(--muted-dark);}

/* ---------- responsive header/nav ---------- */
@media(max-width:900px){
  .nav-toggle{display:flex;}
  .main-nav{
    position:absolute;top:68px;left:0;right:0;flex-direction:column;gap:0;
    background:#fff;border-bottom:1px solid var(--line-light);box-shadow:0 12px 24px rgba(14,26,43,.10);
    padding:8px 16px 16px;margin:0;display:none;
  }
  .main-nav.open{display:flex;}
  .main-nav a{padding:12px 8px;border-radius:3px;}
  .main-nav a[aria-current="page"]::after{display:none;}
  .lang-toggle{margin-left:auto;}
  .hero-grid{grid-template-columns:1fr;gap:34px;}
  .stats .wrap{grid-template-columns:1fr 1fr;}
  .stat{border-left:0;padding:10px 0;}
  .foot-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:560px){
  .stats .wrap{grid-template-columns:1fr;}
  .foot-grid{grid-template-columns:1fr;}
  section{padding:58px 0;}
  .hero .wrap{padding:62px 22px 54px;}
}