:root{
  --brand: #fc7c34;
  --brand-2: #264F93;
  --ink: #0b1220;
  /* User preference: avoid gray text, use near-black */
  --text: var(--ink);
  --muted: var(--ink);
  --line: rgba(252,124,52,.16);
  --line-2: rgba(252,124,52,.22);
  /* Backgrounds: warm-neutral (no yellow cast, no gray/cold white) */
  --bg: #fffaf7;
  --bg-soft: #fff1ea;
  --shadow-sm: 0 2px 12px rgba(11,18,32,.06);
  --shadow-md: 0 18px 70px rgba(11,18,32,.12);
  --shadow-lg: 0 26px 120px rgba(11,18,32,.16);
  --radius: 16px;
  --radius-sm: 12px;
  --max: 1180px;
  --brand-soft: rgba(252,124,52,.14);
  --brand-soft-2: rgba(252,124,52,.08);
  --brand-ink: rgba(252,124,52,.88);
  --space-1: 6px;
  --space-2: 10px;
  --space-3: 14px;
  --space-4: 18px;
  --space-5: 26px;

  /* Type scale (global hierarchy) */
  --fs-11: 11px;
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-20: 20px;
  --fs-32: 32px;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: radial-gradient(1100px 520px at 12% 8%, rgba(252,124,52,.04), transparent 55%),
              radial-gradient(900px 520px at 88% 12%, rgba(252,124,52,.03), transparent 60%),
              var(--bg);
  color: var(--text);
  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",Arial,sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Better rhythm + readability */
p{ letter-spacing: .002em; }
.lead{ text-wrap: pretty; }
::selection{ background: rgba(252,124,52,.22); }
img{ max-width:100%; height:auto; display:block; }
a{ color: inherit; text-decoration:none; }
a:hover{ text-decoration:none; }

/* Lock scroll when drawer open */
html.nav-open, html.nav-open body{ overflow: hidden; }

.container{
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
}

/* Header */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.80);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
}
.brand{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 220px;
}
.brand img{ width: 112px; }
.nav{
  display:flex;
  align-items:center;
  gap: 18px;
  justify-content: center;
  flex: 1 1 auto;
}
.nav a{
  padding: 10px 10px;
  border-radius: 10px;
  font-weight: 750;
  color: var(--ink);
  white-space: nowrap;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.nav a{
  position: relative;
}
.nav a[aria-current="page"]:after{
  content:"";
  position:absolute;
  left: 10px;
  right: 10px;
  bottom: 6px;
  height: 2px;
  border-radius: 999px;
  background: rgba(252,124,52,.55);
}
.nav a:hover{
  background: var(--brand-soft-2);
  color: var(--brand-ink);
  transform: translateY(-1px);
}
.nav a[aria-current="page"]{
  background: rgba(252,124,52,.12);
  color: var(--ink);
}
.header-cta{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap: 10px;
  min-width: 260px;
}
.phone{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background:
    radial-gradient(260px 140px at 18% 0%, rgba(252,124,52,.22), transparent 62%),
    radial-gradient(260px 140px at 100% 10%, rgba(252,124,52,.10), transparent 60%),
    rgba(255,255,255,.92);
  color: var(--ink);
  white-space: nowrap;
}
.phone{
  box-shadow:
    0 14px 36px rgba(11,18,32,.10),
    inset 0 1px 0 rgba(255,255,255,.85);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.phone:hover{
  transform: translateY(-1px);
  border-color: rgba(252,124,52,.26);
  box-shadow:
    0 18px 44px rgba(11,18,32,.12),
    inset 0 1px 0 rgba(255,255,255,.90);
}
.phone:active{ transform: translateY(0px); }
.phone:focus-visible{
  outline:none;
  box-shadow: 0 0 0 4px rgba(252,124,52,.14), 0 0 0 1px rgba(252,124,52,.28);
}

.phone-icon{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(252,124,52,.12);
  border: 1px solid rgba(252,124,52,.18);
  color: var(--brand);
  font-size: var(--fs-14);
  line-height: 1;
}
.phone-text{
  display:flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1.1;
}
.phone-label{
  font-size: var(--fs-12);
  font-weight: 850;
  letter-spacing: .06em;
  color: var(--ink);
}
.phone-number{
  color: var(--ink);
  font-weight: 950;
  letter-spacing: .02em;
}

.menu-btn{
  display:none;
  align-items:center;
  justify-content:center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.menu-btn:hover{
  border-color: rgba(252,124,52,.22);
  box-shadow: 0 14px 36px rgba(17,24,39,.10);
  transform: translateY(-1px);
}
.menu-btn:active{ transform: translateY(0); }
.menu-btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(252,124,52,.14), 0 0 0 1px rgba(252,124,52,.28);
}
.menu-btn span{
  width: 18px;
  height: 2px;
  background: rgba(11,18,32,.75);
  display:block;
  position: relative;
  transition: transform .18s ease, background .18s ease;
}
.menu-btn span:before,
.menu-btn span:after{
  content:"";
  position:absolute;
  left:0;
  width: 18px;
  height: 2px;
  background: rgba(11,18,32,.75);
  transition: transform .18s ease, top .18s ease, opacity .18s ease, background .18s ease;
}
.menu-btn span:before{ top:-6px; }
.menu-btn span:after{ top:6px; }

/* Hamburger -> X when open */
.menu-btn[aria-expanded="true"] span{ background: transparent; }
.menu-btn[aria-expanded="true"] span:before{ top:0; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span:after{ top:0; transform: rotate(-45deg); }

.mobile-drawer{
  display:none;
  border-top: 1px solid var(--line);
  background: rgba(255,253,248,.94);
}
.mobile-drawer[data-open="true"]{
  display:block;
  position: fixed;
  inset: 0;
  height: 100dvh;
  border-top: 0;
  background:
    radial-gradient(860px 420px at 14% 0%, rgba(252,124,52,.18), transparent 60%),
    radial-gradient(860px 420px at 92% 0%, rgba(252,124,52,.12), transparent 60%),
    radial-gradient(980px 520px at 50% 120%, rgba(11,18,32,.08), transparent 62%),
    rgba(255,244,234,.985);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 26px 70px rgba(17,24,39,.14);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: calc(env(safe-area-inset-top) + 88px) 0 calc(env(safe-area-inset-bottom) + 18px);
  z-index: 60;
}
.mobile-drawer[data-open="true"]:before{
  content:"";
  position: fixed;
  inset: 0;
  background:
    radial-gradient(820px 420px at 50% 0%, rgba(252,124,52,.14), transparent 62%),
    rgba(11,18,32,.44);
  pointer-events: auto;
  opacity: 1;
}
.mobile-drawer-inner{
  padding: 10px 0 14px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 8px;
}
.mobile-drawer[data-open="true"] .mobile-drawer-inner{
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
  padding: 6px 20px 14px;
}
.drawer-brand{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 44px;
  height: 44px;
  padding: 6px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.26);
  background:
    radial-gradient(120px 70px at 30% 18%, rgba(255,255,255,.22), rgba(255,255,255,0) 62%),
    rgba(11,18,32,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 18px 44px rgba(17,24,39,.16),
    0 12px 30px rgba(252,124,52,.10);
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.drawer-brand:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.34);
  background:
    radial-gradient(120px 70px at 30% 18%, rgba(255,255,255,.24), rgba(255,255,255,0) 62%),
    rgba(11,18,32,.24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 22px 56px rgba(17,24,39,.18),
    0 16px 38px rgba(252,124,52,.14);
}
.drawer-brand:active{ transform: translateY(0); }
.drawer-brand:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(252,124,52,.14), 0 0 0 1px rgba(252,124,52,.28);
}
.drawer-brand img{
  display:block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.16));
}
.drawer-close{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.26);
  background:
    radial-gradient(120px 70px at 30% 18%, rgba(255,255,255,.22), rgba(255,255,255,0) 62%),
    rgba(11,18,32,.22);
  color: rgba(255,255,255,.92);
  font-size: 26px;
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(0,0,0,.18);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    0 18px 44px rgba(17,24,39,.18),
    0 12px 30px rgba(252,124,52,.12);
  cursor: pointer;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.drawer-close:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.34);
  background:
    radial-gradient(120px 70px at 30% 18%, rgba(255,255,255,.24), rgba(255,255,255,0) 62%),
    rgba(11,18,32,.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 22px 56px rgba(17,24,39,.20),
    0 16px 38px rgba(252,124,52,.16);
}
.drawer-close:active{ transform: translateY(0); }
.drawer-close:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(252,124,52,.14), 0 0 0 1px rgba(252,124,52,.28);
}
.mobile-drawer a:not(.drawer-brand){
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(252,124,52,.55);
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0)),
    var(--brand);
  font-weight: 950;
  color: rgba(255,255,255,.96);
  letter-spacing: .01em;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 18px 46px rgba(252,124,52,.22),
    0 18px 46px rgba(17,24,39,.16);
  display:flex;
  align-items:center;
  gap: 12px;
  position: relative;
  transition: transform .16s ease, background .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.mobile-drawer a:not(.drawer-brand):before{
  content:"";
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display:block;
  background-color: rgba(255,255,255,.22);
  border: 1px solid rgba(255,255,255,.26);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28);
  flex: 0 0 auto;
  background-image: var(--drawer-icon);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 22px 22px;
}
.mobile-drawer a:not(.drawer-brand)[href="/"]{ --drawer-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 3l9 8h-3v9a1 1 0 0 1-1 1h-4v-6H11v6H7a1 1 0 0 1-1-1v-9H3l9-8z'/%3E%3C/svg%3E"); }
.mobile-drawer a:not(.drawer-brand)[href="/aboutus.html"]{ --drawer-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 12a4.5 4.5 0 1 0-4.5-4.5A4.5 4.5 0 0 0 12 12zm0 2c-4.7 0-8 2.3-8 5v1h16v-1c0-2.7-3.3-5-8-5z'/%3E%3C/svg%3E"); }
.mobile-drawer a:not(.drawer-brand)[href="/product.html"]{ --drawer-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M4 7a2 2 0 0 1 2-2h3l1-1h4l1 1h3a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V7zm4 5h8v2H8v-2zm0 4h6v2H8v-2z'/%3E%3C/svg%3E"); }
.mobile-drawer a:not(.drawer-brand)[href="/solution.html"]{ --drawer-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M13 2L3 14h7l-1 8 10-12h-7l1-8z'/%3E%3C/svg%3E"); }
.mobile-drawer a:not(.drawer-brand)[href="/cases.html"]{ --drawer-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M7 6a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2h2a2 2 0 0 1 2 2v7a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3v-7a2 2 0 0 1 2-2h2V6zm2 0v2h6V6H9z'/%3E%3C/svg%3E"); }
.mobile-drawer a:not(.drawer-brand){ --drawer-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M12 2a7 7 0 0 1 4 12.7V22l-4-2-4 2v-7.3A7 7 0 0 1 12 2z'/%3E%3C/svg%3E"); }
.mobile-drawer a:not(.drawer-brand):after{
  content:"";
  margin-left: auto;
  width: 10px;
  height: 10px;
  border-right: 2px solid rgba(255,255,255,.72);
  border-top: 2px solid rgba(255,255,255,.72);
  transform: rotate(45deg);
  flex: 0 0 auto;
}
.mobile-drawer a:not(.drawer-brand):hover{
  transform: translateY(-1px);
  background:
    linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,0)),
    var(--brand);
  border-color: rgba(252,124,52,.72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    0 24px 62px rgba(252,124,52,.26),
    0 24px 62px rgba(17,24,39,.18);
}
.mobile-drawer a:not(.drawer-brand)[aria-current="page"]{
  background:
    linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,0)),
    var(--brand);
  border-color: rgba(255,255,255,.22);
  color: rgba(255,255,255,.98);
}
.mobile-drawer a:not(.drawer-brand)[aria-current="page"]:before{
  background-color: rgba(255,255,255,.26);
  border-color: rgba(255,255,255,.30);
}
.mobile-drawer a:not(.drawer-brand)[aria-current="page"]:after{
  border-right-color: rgba(255,255,255,.82);
  border-top-color: rgba(255,255,255,.82);
}

/* Page hero (shared for inner pages) */
.page-hero{
  position: relative;
  overflow: hidden;
  min-height: 360px;
  padding: 64px 0 54px;
  border-bottom: 1px solid var(--line);
  display:flex;
  align-items: center;
  background:
    radial-gradient(900px 520px at 18% 18%, rgba(252,124,52,.14), transparent 62%),
    radial-gradient(820px 520px at 86% 18%, rgba(252,124,52,.08), transparent 60%),
    radial-gradient(980px 620px at 50% 120%, rgba(0,0,0,.22), transparent 62%),
    linear-gradient(180deg, #0b1220 0%, #121a2a 100%);
}
.page-hero .container{ width: 100%; }
.page-hero-bg{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity: .26;
  background-image:
    linear-gradient(to right, rgba(252,124,52,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(252,124,52,.10) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(70% 80% at 50% 30%, #000 45%, transparent 100%);
  -webkit-mask-image: radial-gradient(70% 80% at 50% 30%, #000 45%, transparent 100%);
}
.page-hero-inner{
  position: relative;
  z-index: 1;
  max-width: 980px;
}
.page-kicker{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.86);
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: var(--fs-12);
}
.page-kicker:before{
  content:"";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--brand);
  box-shadow: 0 0 0 6px rgba(252,124,52,.12);
}
.page-hero h1{
  margin: 14px 0 10px;
  color: rgba(255,255,255,.96);
  font-size: 46px;
  line-height: 1.08;
  font-weight: 950;
  letter-spacing: .01em;
  text-shadow: 0 18px 44px rgba(0,0,0,.35);
}
.page-hero-lead{
  color: rgba(255,255,255,.78);
  max-width: 70ch;
}
.page-hero-actions{
  margin-top: 18px;
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
}
@media (max-width: 980px){
  .page-hero{ min-height: 320px; padding: 56px 0 46px; }
  .page-hero h1{ font-size: 38px; }
}
@media (max-width: 520px){
  .page-hero{ min-height: 280px; padding: 48px 0 38px; }
  .page-hero h1{ font-size: 32px; }
}

/* Hero */
.hero{
  position: relative;
  overflow:hidden;
  padding: 78px 0 58px;
  background:
    radial-gradient(900px 520px at 18% 18%, rgba(252,124,52,.16), transparent 62%),
    radial-gradient(820px 520px at 86% 18%, rgba(252,124,52,.10), transparent 60%),
    radial-gradient(980px 620px at 50% 120%, rgba(0,0,0,.22), transparent 62%),
    linear-gradient(180deg, #0b1220 0%, #121a2a 100%);
  border-bottom: 1px solid var(--line);
}
.hero{
  isolation: isolate;
}
.hero-bg-lines{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 1;
  opacity: .30;
  background-image:
    linear-gradient(to right, rgba(252,124,52,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(252,124,52,.10) 1px, transparent 1px),
    radial-gradient(1.2px 1.2px at 20px 18px, rgba(252,124,52,.40), transparent 60%),
    radial-gradient(1.2px 1.2px at 160px 90px, rgba(252,124,52,.32), transparent 60%),
    radial-gradient(1.2px 1.2px at 280px 40px, rgba(252,124,52,.36), transparent 60%),
    radial-gradient(1.2px 1.2px at 420px 120px, rgba(252,124,52,.28), transparent 60%),
    radial-gradient(1.2px 1.2px at 560px 72px, rgba(252,124,52,.34), transparent 60%);
  background-size:
    56px 56px,
    56px 56px,
    640px 220px,
    640px 220px,
    640px 220px,
    640px 220px,
    640px 220px;
  background-position:
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0,
    0 0;
  transform: none;
  mask-image: radial-gradient(70% 80% at 50% 30%, #000 45%, transparent 100%);
  -webkit-mask-image: radial-gradient(70% 80% at 50% 30%, #000 45%, transparent 100%);
}
.hero-bg-lines:after{
  content:"";
  position:absolute;
  inset:-30% -40%;
  opacity: .32;
  background-image:
    radial-gradient(240px 160px at 20% 20%, rgba(252,124,52,.12), transparent 65%),
    radial-gradient(260px 180px at 80% 30%, rgba(252,124,52,.10), transparent 68%),
    radial-gradient(260px 200px at 55% 65%, rgba(252,124,52,.08), transparent 70%);
}
.hero:after{
  content:"";
  position:absolute;
  right: -220px;
  top: -260px;
  width: 760px;
  height: 760px;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(252,124,52,.10), transparent 64%);
  pointer-events:none;
  z-index: 0;
}
.hero:before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(to right, rgba(11,18,32,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(11,18,32,.05) 1px, transparent 1px);
  background-size: 56px 56px;
  opacity: .16;
  pointer-events:none;
  mask-image: radial-gradient(70% 70% at 50% 38%, #000 58%, transparent 100%);
  -webkit-mask-image: radial-gradient(70% 70% at 50% 38%, #000 58%, transparent 100%);
  z-index: 0;
}
.hero .container:after{
  content:"";
  position:absolute;
  inset: 0;
  pointer-events:none;
  opacity: .08;
  background-image:
    radial-gradient(1px 1px at 20px 30px, rgba(11,18,32,.70), transparent 40%),
    radial-gradient(1px 1px at 120px 160px, rgba(11,18,32,.55), transparent 40%),
    radial-gradient(1px 1px at 220px 80px, rgba(11,18,32,.60), transparent 40%),
    radial-gradient(1px 1px at 340px 140px, rgba(11,18,32,.55), transparent 40%),
    radial-gradient(1px 1px at 520px 60px, rgba(11,18,32,.60), transparent 40%),
    radial-gradient(1px 1px at 640px 200px, rgba(11,18,32,.55), transparent 40%),
    radial-gradient(1px 1px at 760px 120px, rgba(11,18,32,.60), transparent 40%);
  mix-blend-mode: multiply;
  z-index: 2;
}
.hero-grid{
  position: relative;
  z-index: 1;
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap: 28px;
  align-items: start;
}
.hero-grid{
  gap: 32px;
}
.kicker{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.92);
  font-weight: 800;
  letter-spacing: .06em;
}
.kicker:before{
  content:"";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--brand);
  box-shadow: 0 0 0 6px rgba(252,124,52,.10);
  display:inline-block;
}
.hero h1{
  margin: 14px 0 10px;
  font-size: 50px;
  line-height: 1.06;
  color: rgba(255,255,255,.96);
  letter-spacing: .01em;
}
.hero h1{
  font-weight: 950;
}
.hero h1{
  text-shadow: 0 16px 40px rgba(11,18,32,.10);
}
.hl{
  position: relative;
  color: inherit;
  background: none;
  -webkit-text-fill-color: currentColor;
}
.hl:after{
  content:"";
  position:absolute;
  left: -4px;
  right: -4px;
  bottom: 6px;
  height: 10px;
  border-radius: 999px;
  background: rgba(252,124,52,.22);
  z-index: -1;
  filter: blur(.2px);
}
.lead{
  margin: 0;
  font-size: var(--fs-18);
  line-height: 1.75;
  color: rgba(255,255,255,.78);
  max-width: 56ch;
}
.lead{
  max-width: 62ch;
}
.actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 20px;
}
.hero-meta{
  margin-top: 18px;
  display:flex;
  flex-wrap: wrap;
  gap: 10px;
}
.hero-meta .pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.86);
  font-weight: 850;
  font-size: var(--fs-12);
  white-space: nowrap;
}
.hero-meta .pill i{ color: rgba(252,124,52,.95); }
.hero-meta .pill-title{
  color: rgba(255,255,255,.96);
  font-weight: 950;
  letter-spacing: .02em;
}
.hero-meta .pill-desc{ color: rgba(255,255,255,.84); font-weight: 850; }
.hero-meta .pill-sep{
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,.18);
  margin: 0 2px;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid var(--line);
  font-weight: 850;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-1px); }
.btn:active{ transform: translateY(0px); }
.btn:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(252,124,52,.14), 0 0 0 1px rgba(252,124,52,.28);
}
.btn-primary{
  background: var(--brand);
  border-color: rgba(252,124,52,.25);
  color: #fff;
  box-shadow: 0 12px 26px rgba(252,124,52,.22);
}
.btn-primary{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0)), var(--brand);
}
.btn-primary:hover{
  box-shadow: 0 18px 42px rgba(252,124,52,.28);
}
.btn-secondary{
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.92);
}
.btn-secondary{
  box-shadow: 0 12px 26px rgba(0,0,0,.22);
}
.btn-secondary:hover{
  background: rgba(255,255,255,.14);
}
/* legacy hero meta (replaced by .hero-meta pills) */
.meta{
  display:flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 22px;
  color: rgba(255,255,255,.82);
  font-size: 14px;
}
.meta strong{ color: rgba(255,255,255,.96); font-size: 16px; margin-right: 6px; }

.hero-panel{
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(0,0,0,.28);
  padding: 18px 18px;
}
.hero-panel{
  position: relative;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero-panel:before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius: var(--radius);
  padding: 1px;
  background: linear-gradient(135deg, rgba(252,124,52,.22), rgba(252,124,52,.12));
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events:none;
  opacity: .65;
}

/* Make hero feel like a premium tech product, not stacked blocks */
.hero-panel{
  overflow: hidden;
}
.hero-art{
  position: absolute;
  inset: -20px -30px auto -30px;
  height: 220px;
  pointer-events: none;
  opacity: .95;
  mix-blend-mode: multiply;
}
.hero-art svg{
  width: 100%;
  height: 100%;
  display:block;
}
.panel-head{
  position: relative;
  z-index: 1;
  margin-top: 94px;
  margin-bottom: 10px;
  display:flex;
  flex-direction: column;
  gap: 2px;
}
.panel-eyebrow{
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}
.panel-title{
  margin: 0;
  font-size: 15px;
  font-weight: 950;
  letter-spacing: .02em;
  color: rgba(255,255,255,.92);
}
.panel-list,
.panel-item{
  position: relative;
  z-index: 1;
}
.panel-item{
  background: rgba(255,255,255,.72);
}
.panel-item{
  border-radius: 16px;
  padding: 13px 13px;
}
.panel-item strong{
  letter-spacing: .01em;
}
.panel-item span{
  line-height: 1.6;
}
.panel-item:hover{ background: rgba(255,255,255,.10); }
.panel-list{ display:grid; gap: 10px; }
.panel-item{
  display:flex;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.10);
}
.panel-item{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.panel-item:hover{
  transform: none;
  border-color: rgba(255,255,255,.16);
  box-shadow: none;
}
.dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--brand);
  box-shadow: 0 0 0 6px rgba(252,124,52,.12);
  margin-top: 6px;
  flex: 0 0 auto;
}
.dot.blue{
  background: var(--brand);
  box-shadow: 0 0 0 6px rgba(252,124,52,.12);
}
.panel-item strong{
  display:block;
  color: rgba(255,255,255,.92);
  font-weight: 900;
  margin-bottom: 3px;
}
.panel-item span{
  display:block;
  color: rgba(255,255,255,.74);
  font-size: var(--fs-13);
  line-height: 1.55;
}

/* Sections */
.section{
  padding: 74px 0;
}
.section{
  position: relative;
}
.section:not(.alt):before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(11,18,32,.06), transparent);
}
.section.alt{
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.section-head{
  display:flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 26px;
}
.section h2{
  margin: 0;
  color: var(--ink);
  font-size: var(--fs-32);
  letter-spacing: .01em;
}
.section p.sub{
  margin: 6px 0 0;
  color: var(--muted);
  max-width: 66ch;
  line-height: 1.7;
}
.section p.sub{ font-size: var(--fs-14); }

.grid-3{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.service-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.card{
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 20px 18px;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card{
  position: relative;
}
.card:before{
  content:"";
  position:absolute;
  inset: 0;
  border-radius: var(--radius);
  pointer-events:none;
  background: radial-gradient(640px 260px at 20% 0%, rgba(252,124,52,.07), transparent 60%),
              radial-gradient(540px 240px at 85% 0%, rgba(252,124,52,.04), transparent 60%);
  opacity: .9;
}
.card > *{ position: relative; z-index: 1; }
.card:hover{
  transform: translateY(-3px);
  border-color: rgba(252,124,52,.22);
  box-shadow: 0 12px 34px rgba(11,18,32,.12);
}
.card h3{
  margin: 8px 0 8px;
  color: var(--ink);
  font-size: var(--fs-16);
  letter-spacing: .01em;
}
.card p{
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
  font-size: 14px;
}
.icon{
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(252,124,52,.10);
  border: 1px solid rgba(252,124,52,.14);
  color: var(--ink);
  font-weight: 950;
}
.icon{
  box-shadow: inset 0 1px 0 rgba(255,255,255,.70);
}
.icon i{
  font-size: 18px;
  line-height: 1;
  display: inline-block;
}
.icon i.fa-lightbulb-o{ transform: translateY(-0.5px); }

/* About: unified shell (avoid "stacked cards") */
.about-shell{
  display:grid;
  grid-template-columns: 1.25fr .95fr;
  gap: 0;
  border: 1px solid rgba(252,124,52,.16);
  border-radius: calc(var(--radius) + 2px);
  overflow: hidden;
  background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,249,244,.88));
  box-shadow: 0 18px 40px rgba(17,24,39,.08);
}
.about-shell-col{
  padding: 22px 22px;
  min-width: 0;
  display:flex;
  flex-direction: column;
}
.about-shell-right{
  justify-content: space-between;
}
.about-shell-left{
  border-right: 1px solid rgba(252,124,52,.12);
}
.about-shell-head{
  margin-bottom: 14px;
}
.about-shell-eyebrow{
  display:inline-flex;
  align-items:center;
  gap: 10px;
  font-size: var(--fs-12);
  font-weight: 950;
  letter-spacing: .10em;
  color: rgba(11,18,32,.72);
}
.about-shell-eyebrow::after{
  content:"";
  height: 1px;
  width: 44px;
  background: linear-gradient(90deg, rgba(252,124,52,.55), rgba(252,124,52,0));
}
.about-shell-title{
  margin-top: 8px;
  font-size: var(--fs-20);
  font-weight: 950;
  color: var(--ink);
  letter-spacing: .01em;
  line-height: 1.25;
}
.about-shell-sub{
  margin: 10px 0 0;
  color: rgba(11,18,32,.78);
  font-size: var(--fs-13);
  line-height: 1.8;
  max-width: 58ch;
}

.pillar-list{
  margin-top: 10px;
  display:grid;
  gap: 0;
  border-top: 1px solid rgba(252,124,52,.12);
}
.pillar-row{
  display:flex;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid rgba(252,124,52,.12);
}
.pillar-icon{
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(252,124,52,.08);
  border: 1px solid rgba(252,124,52,.16);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
  flex: 0 0 auto;
}
.pillar-icon i{ font-size: 18px; line-height: 1; }
.pillar-text{ min-width: 0; }
.pillar-title{
  font-weight: 950;
  color: var(--ink);
  letter-spacing: .01em;
  font-size: var(--fs-14);
  line-height: 1.25;
}
.pillar-desc{
  margin-top: 4px;
  color: rgba(11,18,32,.78);
  font-size: var(--fs-13);
  line-height: 1.7;
}

.about-media{
  border-bottom: 1px solid rgba(252,124,52,.14);
  padding-bottom: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.about-media{ padding: 0 0 12px; }
.about-media{
  border-bottom: 1px solid rgba(252,124,52,.12);
  padding-bottom: 14px;
}
.about-copy{
  padding-top: 12px;
}
.about-copy-title{
  font-size: var(--fs-12);
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
}
.about-copy-list{
  margin: 10px 0 0;
  padding-left: 18px;
  color: rgba(11,18,32,.82);
  line-height: 1.9;
  font-size: var(--fs-13);
}
.about-img{
  display:block;
  border-radius: var(--radius);
  border: 1px solid rgba(252,124,52,.18);
  background: rgba(255,255,255,.94);
  max-height: 220px;
  width: auto;
  max-width: 100%;
  height: auto;
}
.about-img{ box-shadow: none; }
.quote{ display:none; }

.logo-grid{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.logo-skeleton{
  height: 84px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: linear-gradient(90deg, rgba(255,244,234,.55), rgba(255,255,255,.92), rgba(255,244,234,.55));
  background-size: 200% 100%;
  animation: shimmer 1.1s ease-in-out infinite;
}
@keyframes shimmer{
  0%{ background-position: 0% 0%; }
  100%{ background-position: 200% 0%; }
}
.logo{
  background: rgba(255,255,255,.92);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 14px;
  box-shadow: var(--shadow-sm);
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 96px;
}
.logo{
  border-radius: 14px;
}
.logo img{
  max-width: 100%;
  max-height: 64px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: saturate(.96) contrast(1);
  opacity: 1;
  transition: transform .18s ease, opacity .18s ease, filter .18s ease;
}
.logo:hover img{
  transform: translateY(-1px);
  filter: saturate(1) contrast(1);
}

/* Footer */
.footer{
  padding: 54px 0;
  border-top: 1px solid var(--line);
  background:
    radial-gradient(900px 420px at 20% 0%, rgba(252,124,52,.07), transparent 55%),
    radial-gradient(900px 420px at 80% 0%, rgba(252,124,52,.05), transparent 60%),
    var(--bg);
}
.footer{
  font-size: 14px;
  line-height: 1.85;
}
.footer-grid{
  display:grid;
  grid-template-columns: 1.45fr 1fr .85fr;
  gap: 22px;
}
.footer-grid > div{
  min-width: 0;
}
@media (min-width: 981px){
  .footer-grid > div{
    padding-right: 18px;
  }
  .footer-grid > div:not(:last-child){
    border-right: 1px solid rgba(252,124,52,.14);
  }
  .footer-grid > div:last-child{
    padding-right: 0;
  }
}
.footer h4{
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.footer p{ margin: 0; color: var(--muted); line-height: 1.8; }
.footer .contact{
  display:grid;
  gap: 10px;
  color: var(--muted);
}
.footer .contact{
  font-size: 13px;
  line-height: 1.7;
}
.footer .contact .contact-item{
  display:flex;
  align-items: center;
  gap: 10px;
}
.footer .contact .contact-item{
  padding: 8px 10px;
  border-radius: 14px;
  border: 1px solid rgba(252,124,52,.14);
  background: rgba(255,255,255,.72);
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.footer .contact .contact-item:hover{
  transform: translateY(-1px);
  border-color: rgba(252,124,52,.18);
  background: rgba(252,124,52,.05);
}
.contact-icon{
  width: 28px;
  height: 28px;
  border-radius: 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background: rgba(252,124,52,.10);
  border: 1px solid rgba(252,124,52,.14);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
  flex: 0 0 auto;
}
.contact-icon svg{
  width: 16px;
  height: 16px;
  display:block;
}
.footer .contact a{
  color: var(--ink);
  font-weight: 800;
  text-decoration: none;
}
.footer .contact a:hover{
  color: var(--ink);
}

.footer-brand{
  display:flex;
  align-items:center;
  gap: 12px;
  margin-bottom: 12px;
}
.footer-brand{
  margin-bottom: 14px;
}
.footer-mark{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.20), rgba(255,255,255,0)),
    linear-gradient(135deg, rgba(252,124,52,1), rgba(252,124,52,.72));
  box-shadow: 0 16px 34px rgba(252,124,52,.24);
  border: 1px solid rgba(252,124,52,.22);
}
.footer-mark img{
  width: 26px;
  height: 26px;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,.22));
}
.footer-name{
  color: var(--ink);
  font-weight: 950;
  letter-spacing: .01em;
  font-size: 17px;
  line-height: 1.18;
}
.footer-tagline{
  margin-top: 2px;
  color: var(--ink);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.footer-desc{
  color: var(--ink);
  font-size: 13px;
  line-height: 1.9;
}
.footer-desc{
  max-width: 62ch;
}
.footer-wechat-desc{
  margin-top: 8px;
  max-width: 34ch;
}
.footer-qrcode img{
  width: 92px;
  height: 92px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.footer-qrcode{
  display:flex;
  flex-direction: column;
  align-items: flex-start;
}
.footer-qrcode{
  gap: 2px;
}
.footer-qrcode img{
  margin-top: 12px;
}
.copyright{
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 12px;
  line-height: 1.4;
}
.copyright{
  padding-top: 18px;
  border-top: 1px solid rgba(252,124,52,.14);
}
.copyright a{
  color: var(--ink);
  font-weight: 700;
}
.copyright a:hover{
  color: var(--ink);
}

.beian-link{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
}
.beian-icon{
  width: 16px;
  height: 16px;
  display: inline-block;
}
.beian-icon{
  transform: translateY(1px);
}

/* Responsive */
@media (max-width: 980px){
  .brand{ min-width: auto; }
  .header-cta{ min-width: auto; }
  .hero-grid{ grid-template-columns: 1fr; }
  .about-shell{ grid-template-columns: 1fr; }
  .about-shell-left{
    border-right: 0;
    border-bottom: 1px solid rgba(252,124,52,.14);
  }
  .logo-grid{ grid-template-columns: repeat(2, 1fr); }
  .service-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px){
  .nav{ display:none; }
  .menu-btn{ display:inline-flex; }
  /* Overlay drawer on mobile */
  .mobile-drawer{
    position: fixed;
    inset: 0;
    top: 0; /* overlay; header stays above via z-index */
    border-top: 0;
    background: rgba(255,253,248,.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 26px 70px rgba(17,24,39,.14);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding: calc(env(safe-area-inset-top) + 88px) 0 calc(env(safe-area-inset-bottom) + 18px); /* leave room for header + safe area */
    z-index: 60; /* above header to avoid clipping */
  }
  .mobile-drawer:before{ transition: opacity .18s ease; }
  .mobile-drawer-inner{
    position: relative;
    z-index: 1;
    max-width: var(--max);
    margin: 0 auto;
    padding: 6px 20px 14px;
  }
  .mobile-drawer[data-open="true"]{ display:block; }
  .mobile-drawer[data-open="true"]:before{ opacity: 1; }
}
@media (max-width: 520px){
  .hero h1{ font-size: 36px; }
  .section h2{ font-size: 26px; }
  .grid-3{ grid-template-columns: 1fr; }
  .service-grid{ grid-template-columns: 1fr; }
  .footer-grid{ grid-template-columns: 1fr; }
  .phone{ padding: 10px 10px; }
  .phone-text{ display:none; }
  .phone-icon{ width: 38px; height: 38px; }
  .brand img{ width: 104px; }
  .mobile-drawer{ padding-top: calc(env(safe-area-inset-top) + 78px); }
  .mobile-drawer[data-open="true"]{ padding-top: calc(env(safe-area-inset-top) + 78px); }
}

@media (max-width: 520px){
  .hero-panel{ padding: 16px 14px; }
  .panel-head{ margin-top: 84px; }
  .hero-art{ height: 200px; opacity: .92; }
}

@media (prefers-reduced-motion: no-preference){
  .card, .logo, .panel-item, .btn, .nav a{
    will-change: transform;
  }
  .hero-panel{
    animation: floatIn .55s ease-out both;
  }
  @keyframes floatIn{
    from{ transform: translateY(10px); opacity: .0; }
    to{ transform: translateY(0); opacity: 1; }
  }
}