/* ============================================================
   SG PROPERTIES VIETNAM · 共享设计系统 tokens.css
   设计语言：Starbucks 审美 + 国际资产管理公司视觉（CBRE/JLL）
   版本：v3.0 · 2026-08-16 · 色彩收敛/大留白/大标题/动效
   ============================================================ */

:root{
  /* ---- 品牌绿色四级系统（Starbucks 角色化） ---- */
  --green-brand:#2E7D32;      /* 品牌绿：标题、标识 */
  --green-cta:#3D8B40;        /* CTA 绿：按钮、链接 */
  --green-house:#1B5E20;      /* 深绿：深色区块、联系人、页脚 */
  --green-uplift:#2C5A3D;     /* 中深绿：装饰点缀 */
  --green-light:#E8F0E5;      /* 浅绿 wash：卡片底、标签底 */

  /* ---- 页面与表面 ---- */
  --canvas:#F2F0EB;           /* 暖奶油底（Starbucks Neutral Warm 温度感） */
  --surface:#FFFFFF;          /* 卡片面 */
  --surface-soft:#F9FBF8;     /* 次级表面 */
  --border-soft:rgba(0,0,0,.06);  /* 卡片细边框（国际公司克制做法） */

  /* ---- 文字 ---- */
  --ink:#1F2A24;              /* 深墨绿主文字 */
  --body:#3D4A43;             /* 次级文字 */
  --muted:#6B7A70;            /* 弱化文字 */
  --ink-white:rgba(255,255,255,.94);
  --ink-white-soft:rgba(255,255,255,.72);

  /* ---- 点缀色（仅图标/标签小面积使用） ---- */
  --accent-orange:#E8833A;    /* 送餐 */
  --accent-brown:#B07D4F;     /* 咖啡 */
  --accent-green:#7CB342;     /* 环保 */
  --accent-gold:#E0A53A;      /* 金色：印章/徽章/仪式感 */

  /* ---- 圆角体系（Starbucks 语言） ---- */
  --radius-card:12px;
  --radius-pill:999px;
  --radius-icon:16px;

  /* ---- 阴影（whisper-soft 双层微影） ---- */
  --shadow-card:0 1px 2px rgba(0,0,0,.04), 0 2px 8px rgba(0,0,0,.04);
  --shadow-hover:0 2px 6px rgba(0,0,0,.06), 0 12px 32px rgba(0,0,0,.08);
  --shadow-deep:0 1px 3px rgba(0,0,0,.12), 0 16px 40px rgba(0,0,0,.10);

  /* ---- 字体层级 v3（国际公司大标题） ---- */
  --font-stack:"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans SC","Segoe UI",sans-serif;
  --text-hero:48px;           /* Hero 大标题（桌面） */
  --text-h1:32px;
  --text-h2:32px;             /* 章节标题加大 */
  --text-h3:20px;
  --text-body:14px;
  --text-small:12px;

  /* ---- 留白体系（国际公司大留白） ---- */
  --space-section:80px;       /* 大区块间距（移动端48） */
  --space-card:32px;          /* 卡片内 padding */
}

/* ---- 基础重置 ---- */
*{box-sizing:border-box;margin:0;padding:0}
html,body{
  font-family:var(--font-stack);
  background:var(--canvas);
  color:var(--ink);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{text-decoration:none;color:inherit}

/* ---- 容器 ---- */
.container{max-width:1080px;margin:0 auto;padding:0 24px}

/* ---- 按钮（全胶囊，Starbucks） ---- */
.btn{
  display:inline-block;padding:9px 24px;border-radius:var(--radius-pill);
  font-size:var(--text-body);font-weight:600;letter-spacing:1px;
  transition:all .2s ease;cursor:pointer;border:none;
}
.btn:active{transform:scale(.95)}
.btn-primary{background:var(--green-cta);color:#fff}
.btn-primary:hover{background:var(--green-house)}
.btn-outline{border:1.5px solid var(--green-cta);color:var(--green-cta);background:transparent}
.btn-outline:hover{background:var(--green-cta);color:#fff}
.btn-white{border:1.5px solid rgba(255,255,255,.85);color:#fff;background:transparent}
.btn-white:hover{background:rgba(255,255,255,.15)}

/* ---- 顶部导航 ---- */
.nav{
  background:var(--surface);position:sticky;top:0;z-index:100;
  box-shadow:0 1px 3px rgba(0,0,0,.06);
}
.nav-inner{
  max-width:1080px;margin:0 auto;padding:14px 24px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.brand{display:inline-flex;align-items:center;gap:10px;font-size:14px;letter-spacing:3px;font-weight:700;color:var(--green-brand)}
.brand .dot{width:10px;height:10px;background:var(--green-brand);border-radius:50%;box-shadow:0 0 0 4px rgba(46,125,50,.15)}
.nav-links{display:flex;gap:22px;align-items:center}
.nav-links a{font-size:13px;color:var(--body);letter-spacing:1px;transition:color .15s}
.nav-links a:hover,.nav-links a.active{color:var(--green-brand);font-weight:600}

/* ---- 语言切换器 ---- */
.lang-switch{display:inline-flex;align-items:center;gap:2px;background:var(--surface-soft);border:1px solid rgba(0,0,0,.08);border-radius:var(--radius-pill);padding:3px}
.lang-switch button{
  border:none;background:transparent;font-size:12px;color:var(--muted);
  padding:4px 12px;border-radius:var(--radius-pill);cursor:pointer;font-weight:600;
  font-family:var(--font-stack);
}
.lang-switch button.active{background:var(--green-cta);color:#fff}

/* ---- 卡片 ---- */
.card{
  background:var(--surface);border-radius:var(--radius-card);
  box-shadow:var(--shadow-card);overflow:hidden;transition:transform .22s,box-shadow .22s;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.card .card-bar{height:5px;display:block}

/* ---- 眉题标签 ---- */
.kicker{
  display:inline-block;font-size:11px;letter-spacing:4px;color:var(--green-cta);
  background:var(--green-light);border:1px solid rgba(46,125,50,.2);
  padding:5px 16px;border-radius:20px;font-weight:700;
}

/* ---- 联系人卡片（左右两栏对称 · 紧凑版） ---- */
.contact-box{
  background:var(--green-house);color:#fff;border-radius:var(--radius-card);
  padding:16px 28px;display:flex;flex-wrap:nowrap;gap:40px;align-items:center;
  box-shadow:var(--shadow-deep);
}
.contact-box .label{font-size:11px;letter-spacing:3px;color:var(--accent-green);font-weight:700;margin-bottom:4px}
.contact-box .name{font-size:22px;font-weight:800;letter-spacing:1px;margin-bottom:2px}
.contact-box .role{font-size:12px;color:var(--ink-white-soft);margin-bottom:8px;letter-spacing:1px}
.contact-info{flex:1;min-width:280px}
.contact-items{display:flex;flex-wrap:wrap;gap:10px 28px}
.contact-items .item{display:flex;align-items:center;gap:8px;font-size:13px}
.contact-items .key{color:var(--accent-green);font-weight:600;letter-spacing:1px}
.contact-items .val{color:var(--ink-white);word-break:break-all}
/* 理念（右侧）：与左侧镜像对称 label↔tag / name↔line / role↔vn / items↔vision */
.contact-motto{flex:1;text-align:right;min-width:280px}
.contact-motto .motto-tag{font-size:11px;letter-spacing:3px;color:var(--accent-green);font-weight:700;margin-bottom:4px}
.contact-motto .motto-line{font-size:19px;font-weight:800;letter-spacing:1px;color:#fff;line-height:1.4;margin-bottom:2px;white-space:nowrap}
.contact-motto .motto-vn{font-size:12px;color:rgba(255,255,255,.72);letter-spacing:1px;margin-bottom:8px;line-height:1.6}
.contact-motto .motto-vision{font-size:12px;color:var(--accent-gold);font-weight:700;letter-spacing:1px;padding-top:8px;border-top:1px solid rgba(255,255,255,.16)}

/* ---- 页脚 ---- */
.footer{text-align:center;padding:28px 24px 38px;font-size:12px;color:var(--muted);letter-spacing:1px}
.footer b{color:var(--green-brand)}

/* ---- 响应式 ---- */
@media(max-width:760px){
  .nav-inner{flex-wrap:wrap;justify-content:center;gap:10px;padding:12px 16px}
  .nav-links{flex-wrap:wrap;justify-content:center;gap:14px}
  .contact-box{flex-direction:column;text-align:center;padding:20px 20px}
  .contact-items{align-items:center;justify-content:center}
  .contact-motto{min-width:0;text-align:center}
  .contact-motto .motto-line{white-space:normal}
}

/* ============================================================
   v3 · 动效系统（CBRE 精髓：simple design, elegant movement）
   ============================================================ */

/* ---- 滚动渐入（anim.js 加 .reveal 类） ---- */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s cubic-bezier(.25,.46,.45,.94),transform .6s cubic-bezier(.25,.46,.45,.94)}
.reveal.in-view{opacity:1;transform:translateY(0)}

/* ---- 卡片 hover（国际公司克制动效） ---- */
.card-hover{transition:transform .3s cubic-bezier(.25,.46,.45,.94),box-shadow .3s}
.card-hover:hover{transform:translateY(-6px);box-shadow:var(--shadow-hover)}
.card-hover:hover .card-icon{transform:scale(1.06)}

/* ---- 卡片图标（hover 放大） ---- */
.card-icon{transition:transform .3s cubic-bezier(.25,.46,.45,.94)}

/* ---- 导航下划线生长 ---- */
.nav-links a{position:relative}
.nav-links a::after{content:"";position:absolute;left:0;bottom:-3px;width:0;height:2px;background:var(--green-cta);transition:width .3s cubic-bezier(.25,.46,.45,.94)}
.nav-links a:hover::after,.nav-links a.active::after{width:100%}

/* ---- 图片 hover 缩放（CLUB/项目图） ---- */
.img-zoom{overflow:hidden}
.img-zoom img,.img-zoom .bg-img{transition:transform .6s cubic-bezier(.25,.46,.45,.94)}
.img-zoom:hover img,.img-zoom:hover .bg-img{transform:scale(1.03)}

/* ---- 尊重减弱动效偏好 ---- */
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .card-hover,.card-icon{transition:none}
}

/* ============================================================
   v3.5 · 星巴克那口气（暖奶油 / color-block / 浮动CTA / hover箭头）
   ============================================================ */

/* ---- 暖奶油底上的浅绿 wash 区块（Wise/Starbucks 表面对比分层） ---- */
.wash-band{background:var(--green-light);border-radius:24px;padding:56px 40px;margin:0 -24px;}
@media(max-width:760px){.wash-band{padding:40px 20px;border-radius:18px}}

/* ---- 浮动圆形 CTA（Starbucks Frap 招牌） ---- */
.frap{
  position:fixed;right:28px;bottom:28px;z-index:999;
  width:60px;height:60px;border-radius:50%;
  background:var(--green-cta);color:#fff;display:flex;align-items:center;justify-content:center;
  font-size:26px;line-height:1;box-shadow:0 0 6px rgba(0,0,0,.24),0 8px 12px rgba(0,0,0,.14);
  transition:all .2s ease;text-decoration:none;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}
.frap:hover{transform:scale(1.06);background:var(--green-house)}
.frap:active{transform:scale(.95);box-shadow:0 0 6px rgba(0,0,0,.24),0 8px 12px rgba(0,0,0,0)}
.frap .frap-tip{
  position:absolute;right:70px;top:50%;transform:translateY(-50%);
  background:var(--green-house);color:#fff;font-size:13px;padding:7px 16px;border-radius:20px;
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s;font-weight:600;letter-spacing:1px;
}
.frap:hover .frap-tip{opacity:1}

/* ---- 卡片 hover 箭头（资管公司卡片常用） ---- */
.arrow-link{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--green-cta);font-weight:600;letter-spacing:1px}
.arrow-link .arr{transition:transform .25s cubic-bezier(.25,.46,.45,.94);display:inline-block}
.arrow-link:hover .arr{transform:translateX(4px)}

/* ============================================================
   图片轮播（gallery.js  配套）
   ============================================================ */
.gallery-slide{
  position:absolute;inset:0;opacity:0;transition:opacity .8s ease-in-out;
  background-size:cover;background-position:center;
}
.gallery-slide.active{opacity:1;position:relative}
.gallery-dots{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);
  display:flex;gap:8px;z-index:3;
}
.gallery-dot{
  width:8px;height:8px;border-radius:50%;border:none;
  background:rgba(255,255,255,.45);cursor:pointer;padding:0;
  transition:all .25s;
}
.gallery-dot.active{background:#fff;width:24px;border-radius:4px}