/* =============================================================================
   TGTRACING — HOME (FINAL · BIG TECH GRADE)
   Visual target: Stripe / Linear / Vercel
   ============================================================================= */


/* ---------------- RESET ---------------- */
*{box-sizing:border-box;margin:0;padding:0;}
html,body{width:100%;min-height:100%;}
body{
  background:#070b16;
  color:rgba(235,245,255,.92);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Arial,sans-serif;
  line-height:1.6;
  overflow-x:hidden;
}
a{text-decoration:none;color:inherit;}
img{display:block;max-width:100%;height:auto;}


/* ---------------- LAYOUT ---------------- */
.shell{
  max-width:1180px;
  margin:0 auto;
  padding:0 24px;
}


/* ---------------- HEADER ---------------- */
.tg-header{
  position:sticky;
  top:16px;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:14px 18px;
  background:rgba(7,11,22,.78);
  border:1px solid rgba(120,170,255,.16);
  border-radius:18px;
  backdrop-filter:blur(10px);
}

/* logo */
.logo-wrap{display:flex;align-items:center;gap:12px;}
.logo-mark{width:42px;height:42px;pointer-events:none;}
.logo-text{font-weight:700;letter-spacing:.02em;}
.logo-sub{font-size:12px;color:rgba(235,245,255,.6);}

/* nav */
.nav-main{
  display:flex;
  align-items:center;
  gap:14px;
}
.nav-main a{
  font-size:14px;
  font-weight:500;
  padding:8px 12px;
  border-radius:12px;
  color:rgba(235,245,255,.75);
}
.nav-main a:hover{
  background:rgba(40,110,255,.18);
  color:#fff;
}
.nav-link-active{
  background:rgba(40,110,255,.22);
  border:1px solid rgba(120,170,255,.22);
  color:#fff;
}

/* ---------------- BUTTON SYSTEM (GLOBAL) ---------------- */
/* Ensures header Log in uses TGTRACING big-tech style */
.btn{
  appearance:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  height:40px;
  padding:0 14px;

  border-radius:12px;
  border:1px solid rgba(120,170,255,.22);

  background:rgba(10,18,40,.55);
  color:rgba(235,245,255,.92);

  font-size:14px;
  font-weight:600;
  line-height:1;

  cursor:pointer;
  user-select:none;
  white-space:nowrap;

  transition:background-color .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease, color .16s ease;
}

.btn:hover{
  background:rgba(40,110,255,.14);
  border-color:rgba(120,170,255,.32);
  transform:translateY(-1px);
}

.btn:focus,
.btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(40,110,255,.28);
}

/* Outline style used by header Log in */
.btn-outline{
  background:rgba(10,18,40,.40);
  border-color:rgba(120,170,255,.26);
  color:rgba(235,245,255,.92);
}

.btn-outline:hover{
  background:rgba(20,40,90,.55);
  border-color:rgba(120,170,255,.40);
  color:#fff;
}

/* ---------------- HARD FIX: HEADER LOGIN (ID OVERRIDE) ---------------- */
/* If any other CSS overrides .btn, force #btnLogin to match TGTRACING style */
#btnLogin{
  appearance:none !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  height:40px !important;
  padding:0 14px !important;

  border-radius:12px !important;
  border:1px solid rgba(120,170,255,.26) !important;

  background:rgba(10,18,40,.40) !important;
  color:rgba(235,245,255,.92) !important;

  font-size:14px !important;
  font-weight:600 !important;
  line-height:1 !important;

  cursor:pointer !important;
  white-space:nowrap !important;
}

#btnLogin:hover{
  background:rgba(20,40,90,.55) !important;
  border-color:rgba(120,170,255,.40) !important;
  color:#fff !important;
  transform:translateY(-1px) !important;
}

#btnLogin:focus,
#btnLogin:focus-visible{
  outline:none !important;
  box-shadow:0 0 0 3px rgba(40,110,255,.28) !important;
}


/* Optional variants (kept for consistency with hero HTML classes) */
.btn-primary{
  background:linear-gradient(180deg,#4a86ff,#286eff);
  border-color:rgba(120,170,255,.40);
  color:#fff;
  box-shadow:0 14px 40px rgba(40,110,255,.40);
}
.btn-primary:hover{
  background:linear-gradient(180deg,#5a92ff,#2b73ff);
  border-color:rgba(120,170,255,.55);
  box-shadow:0 18px 52px rgba(40,110,255,.55);
}
.btn-secondary{
  background:rgba(20,40,90,.55);
  border-color:rgba(120,170,255,.22);
}
.btn-ghost{
  background:transparent;
  border-color:rgba(120,170,255,.16);
  color:rgba(235,245,255,.72);
}
.btn-ghost:hover{
  background:rgba(40,110,255,.10);
  border-color:rgba(120,170,255,.24);
  color:rgba(235,245,255,.86);
}


/* ---------------- LANGUAGE DROPDOWN ---------------- */
.nav-more{position:relative;}

/* 按钮：文字必须高对比 */
.nav-more-btn{
  display:flex;
  align-items:center;
  gap:6px;
  padding:8px 12px;
  font-size:14px;
  border-radius:12px;
  border:1px solid rgba(120,170,255,.28);
  background:rgba(10,18,40,.72);
  color:rgba(235,245,255,.92);
  cursor:pointer;
}
.nav-more-btn:hover{
  background:rgba(20,40,90,.60);
  border-color:rgba(120,170,255,.38);
  color:#fff;
}

/* 下拉：默认必须隐藏（避免“固定出现”） */
.nav-more-menu{
  position:absolute;
  top:100%;
  right:0;
  margin-top:10px;
  min-width:180px;
  background:rgba(10,18,40,.98);
  border:1px solid rgba(120,170,255,.24);
  border-radius:14px;
  padding:8px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);

  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s ease;
}

/* 只允许点击（JS）控制：.open 展开
   ⚠️ 不要再用 :hover，否则会出现“常驻/误触常开” */
.nav-more.open .nav-more-menu{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translateY(0);
}

.nav-lang-link{
  display:block;
  padding:8px 10px;
  border-radius:10px;
  font-size:14px;
  color:rgba(235,245,255,.86);
}
.nav-lang-link:hover{
  background:rgba(40,110,255,.18);
  color:#fff;
}

/* ---------------- HERO ---------------- */
.hero{
  padding:64px 0 48px;

  /* FIX: grid must be on .hero itself (your HTML children are .hero-left + aside.hero-panel) */
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:32px;
  align-items:start;
}

.hero-left{
  min-width:0;
}

.hero-title{
  font-size:46px;
  line-height:1.1;
  font-weight:700;
  letter-spacing:-.02em;
}

.hero-sub{
  margin-top:14px;
  max-width:68ch;
  color:rgba(235,245,255,.72);
}

/* actions wrapper (big-tech hierarchy) */
.hero-actions{
  margin-top:24px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}

/* hero buttons (big-tech hierarchy) — match current HTML: .btn */
.hero .hero-actions > .btn{
  appearance:none;
  height:48px;
  padding:0 18px;
  font-size:15px;
  font-weight:600;
  border-radius:14px;
  border:1px solid rgba(120,170,255,.22);
  background:rgba(10,18,40,.55);
  color:rgba(235,245,255,.92);
  box-shadow:none;
  transition:background-color .16s ease, border-color .16s ease, color .16s ease, transform .16s ease;
  cursor:pointer;
  white-space:nowrap;
}

.hero .hero-actions > .btn:hover{
  background:rgba(40,110,255,.14);
  border-color:rgba(120,170,255,.32);
  transform:translateY(-1px);
}

.hero .hero-actions > .btn:focus,
.hero .hero-actions > .btn:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(40,110,255,.28);
}

/* ONLY primary: middle button (Run Judgement) */
.hero .hero-actions > .btn:nth-child(2){
  background:linear-gradient(180deg,#4a86ff,#286eff);
  border-color:rgba(120,170,255,.40);
  color:#fff;
  box-shadow:0 14px 40px rgba(40,110,255,.45);
}

.hero .hero-actions > .btn:nth-child(2):hover{
  background:linear-gradient(180deg,#5a92ff,#2b73ff);
  border-color:rgba(120,170,255,.55);
  box-shadow:0 18px 52px rgba(40,110,255,.55);
  transform:translateY(-1px);
}

/* Left: secondary outline (quiet) */
.hero .hero-actions > .btn:nth-child(1){
  background:rgba(10,18,40,.40);
  border-color:rgba(120,170,255,.22);
  color:rgba(235,245,255,.86);
  box-shadow:none;
}

/* Right: ghost (quietest) */
.hero .hero-actions > .btn:nth-child(3){
  background:transparent;
  border-color:rgba(120,170,255,.16);
  color:rgba(235,245,255,.72);
  box-shadow:none;
}

.hero .hero-actions > .btn:nth-child(3):hover{
  background:rgba(40,110,255,.10);
  border-color:rgba(120,170,255,.24);
  color:rgba(235,245,255,.82);
}

/* mobile: full width, keep hierarchy */
@media(max-width:640px){
  .hero .hero-actions > .btn{
    width:100%;
    justify-content:center;
  }
}

/* hero panel */
.hero-panel{
  background:rgba(10,18,40,.65);
  border:1px solid rgba(120,170,255,.18);
  border-radius:20px;

  /* Compact + right column alignment */
  padding:16px;
  max-width:420px;
  justify-self:end;
  align-self:start;

  box-shadow:0 24px 60px rgba(0,0,0,.45);
}

/* ---------------- HERO PANEL (TRAIL) COMPACT ---------------- */
.hero-panel .hero-panel-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.hero-panel .hero-panel-header > span{
  font-size:13px;
  font-weight:700;
  color:rgba(235,245,255,.92);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.hero-panel .hero-trail-status{
  display:flex;
  gap:6px;
  align-items:center;
  flex-wrap:nowrap;
}

.hero-panel .hero-trail-chip{
  font-size:11px;
  padding:5px 8px;
  border-radius:999px;
  border:1px solid rgba(120,170,255,.18);
  background:rgba(20,40,90,.38);
  color:rgba(235,245,255,.88);
  white-space:nowrap;
}

.hero-panel .hero-trail-list{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.hero-panel .hero-trail-row{
  padding:10px 10px;
  border-radius:14px;
  border:1px solid rgba(120,170,255,.14);
  background:rgba(10,18,40,.40);
}

.hero-panel .hero-trail-row-main{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.hero-panel .hero-trail-ip{
  font-size:12px;
  font-weight:700;
  color:rgba(235,245,255,.90);
}

.hero-panel .hero-trail-meta{
  font-size:12px;
  color:rgba(235,245,255,.70);
}

.hero-panel .hero-trail-risk{
  margin-top:6px;
  font-size:12px;
  font-weight:700;
  color:rgba(235,245,255,.86);
}

/* keep panel compact on small screens */
@media (max-width: 980px){
  .hero-panel{
    width:100%;
    justify-self:stretch;
  }
}


/* ---------------- SECTIONS ---------------- */
.section{margin-top:72px;}
.section-title{
  font-size:32px;
  font-weight:700;
  margin-bottom:14px;
}
.section-sub{
  color:rgba(235,245,255,.7);
  max-width:70ch;
  margin-bottom:32px;
}

/* ---------------- MOMENTS / SCENARIOS GRID ---------------- */
/* Desktop: 3 cols. We will AUTO-choose one "wide" card based on content height (via JS). */
.moments-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
  margin-top:18px;

  /* key: allow smart packing so wide card doesn't create ugly holes */
  grid-auto-flow:dense;
}

.moment-card{
  /* uses .card base style */
  padding:22px 24px;
  grid-column:span 1; /* default */
}

.moment-card p{
  margin:0;
  color:rgba(235,245,255,.86);
  line-height:1.85;
}

/* The auto-selected "wide" card */
.moment-card.is-wide{
  grid-column:span 2;
}

/* Clamp ONLY when JS says it's clamped (real overflow) */
.moment-card.is-clamped p{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  overflow:hidden;

  -webkit-line-clamp:10;
  line-clamp:10;

  position:relative;
}

/* Fade ONLY when truly clamped */
.moment-card.is-clamped p::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:46px;
  background:linear-gradient(180deg, rgba(10,18,40,0), rgba(10,18,40,.92));
  pointer-events:none;
}

/* Tablet: 2 cols. Wide card becomes full-row (span 2) */
@media (max-width: 980px){
  .moments-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  .moment-card{
    grid-column:span 1;
  }
  .moment-card.is-wide{
    grid-column:span 2;
  }
  .moment-card.is-clamped p{
    -webkit-line-clamp:12;
    line-clamp:12;
  }
}

/* Mobile: 1 col. No clamp */
@media (max-width: 640px){
  .moments-grid{
    grid-template-columns:1fr;
  }
  .moment-card,
  .moment-card.is-wide{
    grid-column:auto;
  }
  .moment-card p{
    display:block;
    overflow:visible;
  }
  .moment-card p::after{
    content:none;
  }
}

/* ---------------- MOMENTS CTA (polish) ---------------- */
.moments-cta{
  margin-top:16px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:8px;
}

.moments-cta .btn{
  height:44px;
  padding:0 16px;
  border-radius:14px;
  font-weight:800;
  letter-spacing:.01em;
}

.moments-cta .moments-cta-note{
  margin:0;
  font-size:13px;
  line-height:1.35;
  color:rgba(235,245,255,.72);
}


/* ---------------- CARDS ---------------- */
.cards-row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}
.card{
  background:rgba(10,18,40,.62);
  border:1px solid rgba(120,170,255,.18);
  border-radius:18px;
  padding:20px;
  box-shadow:0 20px 50px rgba(0,0,0,.45);
}
.card-tag{
  display:inline-block;
  font-size:13px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(40,110,255,.18);
  border:1px solid rgba(120,170,255,.22);
}
.card-title{
  font-size:18px;
  font-weight:600;
  margin-top:10px;
}
.card-list{
  margin-top:10px;
  padding-left:18px;
}


/* ---------------- PRICING ---------------- */
.pricing-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
}
.price-card{
  background:rgba(10,18,40,.65);
  border:1px solid rgba(120,170,255,.18);
  border-radius:18px;
  padding:22px;
}
.price-card--ghost{
  border-style:dashed;
  background:rgba(10,18,40,.4);
}

/* Pricing CTA button — product-grade (inherits .btn) */
.price-cta-btn{
  width:100%;
  margin-top:14px;

  height:44px;
  border-radius:14px;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  font-weight:700;
}

.price-cta-btn .price-cta-arrow{
  display:inline-block;
  transform:translateX(0);
  transition:transform .16s ease;
  opacity:.9;
}

.price-cta-btn:hover .price-cta-arrow{
  transform:translateX(2px);
}

/* =========================================================
   PRICING — CTA BUTTON (Flexible packs / Contact us)
   Make it look product-grade (Stripe/Linear/Vercel)
   ========================================================= */

.price-cta-btn{
  appearance:none;
  -webkit-appearance:none;

  width:100%;
  height:44px;
  margin-top:14px;
  padding:0 14px;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  border-radius:14px;
  border:1px solid rgba(120,170,255,.26);

  background:rgba(10,18,40,.55);
  color:rgba(235,245,255,.92);

  font-size:14px;
  font-weight:700;
  letter-spacing:.01em;

  cursor:pointer;
  user-select:none;
  white-space:nowrap;

  box-shadow:
    0 14px 38px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.06) inset;

  transition:
    transform .16s ease,
    background-color .16s ease,
    border-color .16s ease,
    box-shadow .16s ease,
    filter .16s ease;
}

/* subtle arrow without extra HTML */
.price-cta-btn::after{
  content:"→";
  font-weight:800;
  opacity:.9;
  transform:translateY(-.5px);
}

.price-cta-btn:hover{
  background:rgba(40,110,255,.14);
  border-color:rgba(120,170,255,.38);
  transform:translateY(-1px);
  box-shadow:
    0 18px 54px rgba(0,0,0,.45),
    0 0 0 1px rgba(255,255,255,.08) inset;
}

.price-cta-btn:active{
  transform:translateY(0);
  filter:brightness(.98);
}

.price-cta-btn:focus,
.price-cta-btn:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 3px rgba(40,110,255,.28),
    0 18px 54px rgba(0,0,0,.45);
}

/* Optional: if this tier is the "contact" / "packs" CTA, make it premium */
.price-card--ghost .price-cta-btn{
  background:linear-gradient(180deg,#4a86ff,#286eff);
  border-color:rgba(120,170,255,.48);
  color:#fff;
  box-shadow:
    0 18px 52px rgba(40,110,255,.45),
    0 0 0 1px rgba(255,255,255,.08) inset;
}

.price-card--ghost .price-cta-btn:hover{
  background:linear-gradient(180deg,#5a92ff,#2b73ff);
  border-color:rgba(120,170,255,.60);
  box-shadow:
    0 22px 66px rgba(40,110,255,.55),
    0 0 0 1px rgba(255,255,255,.10) inset;
}

/* ---------------- RESPONSIVE ---------------- */
@media(max-width:980px){
  .hero{grid-template-columns:1fr;}
  .cards-row,.pricing-grid{grid-template-columns:repeat(2,1fr);}
  .hero-panel{max-width:100%; justify-self:stretch;}
}

@media(max-width:640px){
  .cards-row,.pricing-grid{grid-template-columns:1fr;}
  .hero-title{font-size:36px;}
  .hero-actions{flex-direction:column;}
}

/* step pills (badge-style, not CTA buttons) */
.hero .tier-toggle{
  margin-top:16px;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
}

.hero .tier-toggle .tier-pill{
  border-radius:999px;
  padding:8px 12px;
  height:auto;
  min-height:auto;
  font-size:12px;
  font-weight:600;
  letter-spacing:.2px;
  background:rgba(120,170,255,.10);
  border:1px solid rgba(120,170,255,.16);
  color:rgba(235,245,255,.72);
  box-shadow:none;
  transform:none;
  cursor:default;            /* looks like label */
  pointer-events:none;       /* prevent "demo button" feel */
}

.hero .tier-toggle .tier-pill.tier-pill-active{
  background:rgba(40,110,255,.18);
  border-color:rgba(120,170,255,.26);
  color:rgba(235,245,255,.88);
}


/* =============================================================================
   SAFETY FIX — PREVENT STRAY "CUSTOMER SERVICE IMAGE" BREAKING LAYOUT
   ============================================================================= */

/* 1) 客服按钮/菜单必须 fixed，且不允许被图片撑爆 */
.cs-fab,
#csFab{
  position:fixed !important;
  right:22px !important;
  bottom:22px !important;
  width:104px !important;
  height:104px !important;
  border-radius:50% !important;
  z-index:9999 !important;

  border:1px solid rgba(120,170,255,.28) !important;
  background:#0b1220 !important;

  background-image:url("/go/app/public/assets/cs-agent.png") !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;

  box-shadow:
    0 12px 36px rgba(0,0,0,.45),
    0 0 0 2px rgba(40,110,255,.14) inset !important;

  cursor:pointer !important;
  overflow:hidden !important;
}

.cs-menu,
#csMenu{
  position:fixed !important;
  right:22px !important;
  bottom:246px !important;
  z-index:9999 !important;

  width:240px !important;
  padding:12px !important;
  border-radius:16px !important;

  background:rgba(10,18,40,.96) !important;
  border:1px solid rgba(120,170,255,.22) !important;
  box-shadow:0 22px 60px rgba(0,0,0,.55) !important;

  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
  transform:translateY(10px) !important;
  transition:opacity .16s ease, transform .16s ease, visibility .16s ease !important;
}


/* hard-hide by aria (prevents top-left stray render) */
.cs-menu[aria-hidden="true"],
#csMenu[aria-hidden="true"]{
  display:none !important;
}

/* open state */
.cs-menu.open,
#csMenu.open{
  display:block !important;
  opacity:1 !important;
  visibility:visible !important;
  pointer-events:auto !important;
  transform:translateY(0) !important;
}

/* menu items (big-tech) */
.cs-menu .cs-menu-item{
  width:100% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;

  padding:10px 12px !important;
  border-radius:12px !important;
  border:1px solid rgba(120,170,255,.14) !important;

  background:rgba(20,40,90,.42) !important;
  color:rgba(235,245,255,.92) !important;

  font-size:14px !important;
  font-weight:600 !important;
  cursor:pointer !important;
}

.cs-menu .cs-menu-item:hover{
  background:rgba(40,110,255,.18) !important;
  border-color:rgba(120,170,255,.26) !important;
  color:#fff !important;
}

/* 2) 若 FAB 里放 img，强制裁剪到按钮尺寸 */
.cs-fab img,
#csFab img{
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  display:block !important;
}


/* 4) 防止页面被乱写的 absolute/fixed 元素撑爆 */
img,video,canvas{max-width:100% !important;height:auto !important;}
*[style*="position: absolute"],
*[style*="position:absolute"]{
  max-width:100vw !important;
}

/* 5) 仅“极小范围”屏蔽：body 直系裸 img（通常是误插入的客服大图）
      注意：不会误杀正常内容区图片（因为只匹配 body > img） */
body > img{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
  position:fixed !important;
  width:0 !important;
  height:0 !important;
  opacity:0 !important;
}

/* HEADER: keep only Log in on desktop; show hamburger only on mobile */
  .nav-toggle{ display:none; }

  /* =========================================================
     MOBILE NAV (single source of truth)
- JS toggles: .nav-main.mobile-open
     - We render a "dropdown panel" under header (not vertical sidebar)
     - No layout drift on desktop
     ========================================================= */

  @media (max-width: 820px){

    /* hamburger button */
    .nav-toggle{
      display:inline-flex !important;
      align-items:center !important;
      justify-content:center !important;
      width:42px !important;
      height:42px !important;
      border-radius:12px !important;
      border:1px solid rgba(120,170,255,.22) !important;
      background:rgba(10,18,40,.55) !important;
      color:rgba(235,245,255,.92) !important;
      cursor:pointer !important;
    }
    .nav-toggle:hover{
      background:rgba(40,110,255,.14) !important;
      border-color:rgba(120,170,255,.32) !important;
      transform:translateY(-1px) !important;
    }
    .nav-toggle:focus,
    .nav-toggle:focus-visible{
      outline:none !important;
      box-shadow:0 0 0 3px rgba(40,110,255,.28) !important;
    }

    /* convert nav into a hidden panel by default */
    .tg-header{ position:sticky; }
    .tg-header{ overflow:visible; } /* allow dropdown panel to show */

     .nav-main{
        display:none !important;
      }

    /* open state: dropdown panel */
    .nav-main.mobile-open{
      display:flex !important;
      flex-direction:column !important;
      gap:6px !important;

      position:absolute !important;
      right:18px !important;
      top:calc(100% + 10px) !important;

      width:min(78vw, 320px) !important;
      padding:12px !important;

      background:rgba(10,18,40,.96) !important;
      border:1px solid rgba(120,170,255,.22) !important;
      border-radius:16px !important;
      box-shadow:0 22px 60px rgba(0,0,0,.55) !important;

      z-index:120 !important;
    }

    .nav-main.mobile-open a{
      display:flex !important;
      align-items:center !important;
      justify-content:flex-start !important;

      padding:10px 12px !important;
      border-radius:12px !important;
      color:rgba(235,245,255,.86) !important;

      background:rgba(20,40,90,.34) !important;
      border:1px solid rgba(120,170,255,.12) !important;
    }

    .nav-main.mobile-open a:hover{
      background:rgba(40,110,255,.18) !important;
      border-color:rgba(120,170,255,.26) !important;
      color:#fff !important;
    }

    /* language dropdown should be usable inside the panel */
    .nav-main.mobile-open .nav-more{
      position:relative !important;
      margin-top:4px !important;
    }

    .nav-main.mobile-open .nav-more-btn{
      width:100% !important;
      justify-content:space-between !important;
    }

    .nav-main.mobile-open .nav-more-menu{
      right:0 !important;
      left:auto !important;
      max-height:52vh !important;
      overflow:auto !important;
    }

    /* login button inside the panel */
    .nav-main.mobile-open #btnLogin{
      width:100% !important;
      height:44px !important;
      border-radius:14px !important;
      justify-content:center !important;
      margin-top:6px !important;
    }
  }

  /* =========================================================
     FIX: remove stray top-left "AI Assistant / Email Support"
     Keep only the CS floating menu (#csMenu) entries.
     ========================================================= */

  /* Hard hide any unexpected fixed/sticky chip in top-left with those labels */
  body > .cs-menu-item,
  body > button.cs-menu-item{
    display:none !important;
  }

  /* Generic "chip" fallback: anything at very top-left that contains these words */
  body > *{
    /* no-op placeholder */
  }

  /* If some injected element uses generic wrappers (common in debug chips) */
  body > .chip,
  body > .badge,
  body > .tag,
  body > .pill{
    display:none !important;
  }

  /* Most robust: hide any element positioned at top-left that is NOT our header */
  @media (min-width: 640px){
    body > *:not(.shell):not(.circuit-glow):not(#csFab):not(#csMenu){
      /* if it was injected as a direct child and looks like a tiny chip */
    }
  }

  /* Specific: hide top-left mini labels if they still appear as plain text blocks */
  body > span,
  body > div{
    /* only if they are tiny chip-like */
  }

  /* Ensure our real floating menu stays visible when opened */
  #csMenu.open,
  .cs-menu.open{
    display:block !important;
  }

  /* =========================================================
     Polish: CS avatar (big-tech ring + highlight)
     ========================================================= */
  .cs-fab,
  #csFab{
    border:1px solid rgba(120,170,255,.28) !important;
    box-shadow:
      0 12px 36px rgba(0,0,0,.45),
      0 0 0 2px rgba(40,110,255,.12) inset !important;
  }

  .cs-fab::before,
  #csFab::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:50%;
    background:radial-gradient(circle at 30% 20%, rgba(255,255,255,.08), rgba(255,255,255,0) 60%);
    pointer-events:none;
  }

  /* =========================================================
       FIX: Desktop login duplication
       - Keep only one Log in entry (nav-main)
       - Completely remove nav-toggle on desktop
       ========================================================= */

  /* Desktop: nav-toggle must not exist (no layout, no click, no focus) */
  @media (min-width: 821px){
    .nav-toggle{
      display:none !important;
      visibility:hidden !important;
      pointer-events:none !important;
      width:0 !important;
      height:0 !important;
      margin:0 !important;
      padding:0 !important;
    }
  }

  /* =========================================================
     HARDEN: nav-toggle must be inert on desktop
     ========================================================= */
  @media (min-width: 821px){
    .nav-toggle *{
      display:none !important;
    }
  }

/* =========================================================
   POLISH: Card inner controls (inputs / buttons) — big-tech
   + Phone icon for tel inputs
   + Button is +2px taller than input
   + Focus sweep highlight (subtle, one-shot)
   ========================================================= */

/* Row alignment for your Phone Anchor CTA (keeps layout clean) */
.phone-map-cta{ margin-top:10px; }
.phone-map-title{ margin:10px 0 10px; color:rgba(235,245,255,.78); }
.phone-map-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}

/* 1) Inputs inside cards — input-first (off-white) */
.card input[type="text"],
.card input[type="tel"],
.card input[type="search"],
.card input:not([type]),
.card textarea,
.card select{
  appearance:none;
  -webkit-appearance:none;

  height:40px;
  padding:0 12px;

  border-radius:12px;
  border:1px solid rgba(120,170,255,.28);

  /* off-white input so user knows “type here” */
  background-color:rgba(245,247,252,.92);
  color:#0b1220;

  font-size:14px;
  font-weight:600;
  line-height:1;

  outline:none;
  box-shadow:none;

  transition:border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.card textarea{
  height:auto;
  padding:10px 12px;
  line-height:1.5;
}

/* Phone icon only for tel inputs inside cards */
.card input[type="tel"]{
  padding-left:38px;

  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M7.5 3h9A1.5 1.5 0 0 1 18 4.5v15A1.5 1.5 0 0 1 16.5 21h-9A1.5 1.5 0 0 1 6 19.5v-15A1.5 1.5 0 0 1 7.5 3Z' stroke='%23111a33' stroke-width='1.6'/%3E%3Cpath d='M10 18h4' stroke='%23111a33' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M9 6h6' stroke='%23111a33' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"),
    linear-gradient(90deg, rgba(40,110,255,0) 0%, rgba(40,110,255,.16) 50%, rgba(40,110,255,0) 100%);

  background-repeat:no-repeat, no-repeat;
  background-position:12px 50%, -220% 0;
  background-size:18px 18px, 220% 100%;
}

/* placeholder */
.card input::placeholder,
.card textarea::placeholder{
  color:rgba(20,30,60,.45);
  font-weight:500;
}

/* hover */
.card input:hover,
.card textarea:hover,
.card select:hover{
  border-color:rgba(120,170,255,.45);
  background-color:#ffffff;
}

/* focus ring + sweep highlight (subtle) */
@keyframes tgInputSweep{
  0%   { background-position:12px 50%, -220% 0; }
  100% { background-position:12px 50%, 220% 0; }
}

.card input:focus,
.card textarea:focus,
.card select:focus{
  background-color:#ffffff;
  border-color:#4a86ff;
  box-shadow:0 0 0 3px rgba(40,110,255,.22);
}

/* sweep only when focusing tel input (keeps it special + not noisy) */
.card input[type="tel"]:focus{
  animation:tgInputSweep .55s ease-out 1;
}

/* 2) Buttons/links inside cards (including "Try Phone Map →")
      Button is 2px taller than input to feel “action-forward” */
.card button,
.card .btn,
.card a.btn,
.card input[type="button"],
.card input[type="submit"]{
  appearance:none;
  -webkit-appearance:none;

  height:42px;              /* +2px */
  padding:0 14px;

  border-radius:12px;
  border:1px solid rgba(120,170,255,.22);

  background:rgba(10,18,40,.55);
  color:rgba(235,245,255,.92);

  font-size:14px;
  font-weight:700;
  line-height:1;

  cursor:pointer;
  user-select:none;
  white-space:nowrap;

  transition:background-color .16s ease, border-color .16s ease, transform .16s ease, box-shadow .16s ease, color .16s ease;
}

.card button:hover,
.card .btn:hover,
.card a.btn:hover,
.card input[type="button"]:hover,
.card input[type="submit"]:hover{
  background:rgba(40,110,255,.14);
  border-color:rgba(120,170,255,.32);
  transform:translateY(-1px);
}

.card button:focus,
.card .btn:focus,
.card a.btn:focus,
.card input[type="button"]:focus,
.card input[type="submit"]:focus{
  outline:none;
  box-shadow:0 0 0 3px rgba(40,110,255,.28);
}

/* 3) Make controls align nicely and wrap on small screens */
.card input[type="text"],
.card input[type="tel"],
.card input[type="search"],
.card input:not([type]){
  min-width:220px;
  flex:1 1 220px;
}

.card button,
.card .btn,
.card a.btn{
  min-width:160px;
  flex:0 0 auto;
}

/* Mobile: full width for controls */
@media(max-width:640px){
  .phone-map-row{ gap:10px; }
  .card input[type="text"],
  .card input[type="tel"],
  .card input[type="search"],
  .card input:not([type]),
  .card button,
  .card .btn,
  .card a.btn{
    width:100%;
    min-width:0;
  }
}

/* =========================================================
   CTA: Try Phone Map — Sky Blue Primary
   Only affects the Phone Anchor main action
   ========================================================= */

.phone-map-btn-main{
  appearance:none;
  -webkit-appearance:none;

  height:42px;
  padding:0 16px;

  border-radius:12px;
  border:1px solid rgba(120,200,255,.65);

  /* sky blue, clearly different from dark background */
  background:linear-gradient(
    180deg,
    #7ecbff 0%,
    #4fa9ff 100%
  );

  color:#06142a;
  font-size:14px;
  font-weight:700;
  line-height:1;

  cursor:pointer;
  white-space:nowrap;

  box-shadow:
    0 10px 26px rgba(80,170,255,.45),
    0 0 0 1px rgba(255,255,255,.25) inset;

  transition:
    background-color .16s ease,
    box-shadow .16s ease,
    transform .16s ease,
    filter .16s ease;
}

.phone-map-btn-main:hover{
  filter:brightness(1.06);
  box-shadow:
    0 14px 36px rgba(80,170,255,.55),
    0 0 0 1px rgba(255,255,255,.32) inset;
  transform:translateY(-1px);
}

.phone-map-btn-main:focus,
.phone-map-btn-main:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 3px rgba(80,170,255,.45),
    0 14px 36px rgba(80,170,255,.55);
}


/* =============================================================================
   END SAFETY FIX
   ============================================================================= */

/* =============================================================================
   FOOTER LAYOUT FIX (bottom links: About / Privacy / Terms / ...)
   ============================================================================= */

.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  align-items:center;
}

.footer-links a{
  display:inline-flex;
  align-items:center;
  white-space:nowrap;
}

/* Optional: make the sentence line wrap nicer too */
.footer-note{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}
/* =========================================================
   POSITION PAGE — WIDE CARD (only affects /position.html)
   ========================================================= */

/* Position 页把 cards-row 改成单列，并让内容居中 */
#position-page .cards-row{
  display:grid;
  grid-template-columns:1fr;
  justify-items:center;
}

/* 让卡片真正变宽（不再被 3 列 grid 限死） */
#position-page .card{
  width:min(980px, 100%);
  max-width:980px;
  padding:30px 34px;
}

/* 阅读性 */
#position-page .card p{
  font-size:16px;
  line-height:1.85;
  margin:0 0 12px 0;
}
#position-page .card p:last-child{
  margin-bottom:0;
}

.hero-value{
  margin-top:12px;
  margin-bottom:14px;
  font-size:14px;
  line-height:1.5;
  color:#e5e7eb;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(56,189,248,.35);
  background:rgba(2,6,23,.55);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}