/* ==========================================================================

   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap');

:root {
  /* 文本色 */
  --color-shadded-black: #231f20;
  --color-dark-gray: #555555;
  --color-gray: #6c6c70;
  --color-light-gray: #8e8e93;
  --color-off-white: #ebecf0;
  --color-blue: #2848c1;

  /* 背景色 */
  --color-dark-orange: #fcaf1b;
  --color-light-blue: #006ea6;
  --color-light-cream: #fffbe5;
  --color-light-sky: #dcf2fb;
  --color-red: #ed1c27;
  --color-border: #ebecf0;
  --color-hr: #929191;
  --color-footer-line: #54a0c6;

  --font-regular: 'Roboto', Arial, Helvetica, sans-serif;
  --radius: 5px;
  --radius-btn: 6px;
  --container: 1140px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-regular);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: var(--color-shadded-black);
  background: #fff;
}

img { max-width: 100%; vertical-align: middle; border-style: none; }
button { font-family: inherit; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 12px;
}

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 500; }

h2 {
  font-size: 40px;
  line-height: 1.2;
  font-weight: 500;
  color: #212529;
}

/* 黄色手绘下划线：用于 "TallyPrime ?" / "products" / "tutorials" */
.underline-img {
  display: inline-block;
  background: url('assets/yellow-underline-img.svg') no-repeat bottom center;
  background-size: contain;
  padding-bottom: .55rem;
}

/* 主按钮（黄色） */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: .45rem .9rem;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--color-shadded-black);
  background-color: var(--color-dark-orange);
  border: 1px solid var(--color-dark-orange);
  border-radius: var(--radius-btn);
  cursor: pointer;
  text-decoration: none;
  transition: background-color .25s ease;
}
.btn-primary:hover { background-color: #e59e0d; border-color: #e59e0d; }
.btn-primary img { transition: transform .3s ease-in-out; }
.btn-primary:hover img { transform: translate(4px, -4px); }
.btn-download { padding: .45rem 3rem; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: var(--color-blue);
}
.link-arrow img { transition: transform .3s ease-in-out; }
.link-arrow:hover img { transform: translate(4px, -4px); }

/* ===========================  顶部条（米黄）  =========================== */
.topbar {
  background: var(--color-light-cream);
  border-bottom: 1px solid #dee2e6;
}
.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 53px;
}
.topbar-logo img { height: 30px; width: auto; }
.topbar-links {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.topbar-links a {
  display: inline-block;
  padding: 8px;
  font-size: 15px;
  color: #212529;
  text-decoration: none;
}
.topbar-links a:hover { color: var(--color-light-blue); }

/* ===========================  主导航（深蓝）  =========================== */
.mainnav { background: var(--color-light-blue); position: relative; z-index: 60; }

/* 三栏布局：左菜单 / 居中 Logo / 右侧操作区 */
.navbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 58px;
}

.navmenu {
  display: flex;
  align-items: center;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.navmenu > li { position: relative; }
.navmenu > li > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  color: #fff;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
}
.navmenu > li > a:hover { color: var(--color-dark-orange); }

.caret {
  display: inline-block;
  width: 8px;
  height: 8px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s ease;
}
.navmenu > li:hover .caret { transform: rotate(45deg) translate(1px, 1px); }

.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 240px;
  margin: 0;
  padding: 8px 0;
  list-style: none;
  background: #fff;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.navmenu > li:hover .dropdown,
.navmenu > li:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a {
  display: block;
  padding: 9px 18px;
  font-size: 15px;
  color: #212529;
  text-decoration: none;
}
.dropdown a:hover { background: var(--color-light-cream); color: var(--color-light-blue); }

.navbrand { display: flex; align-items: center; justify-self: center; }
.navbrand img { height: 42px; width: auto; }

.navright { display: flex; align-items: center; justify-content: flex-end; gap: 10px; }
.navright .icon-link {
  display: inline-flex;
  align-items: center;
  padding: 6px;
  color: #fff;
  text-decoration: none;
}
.navright .icon-link:hover { color: var(--color-dark-orange); }
.navlogin {
  padding: 6px 10px;
  color: #fff;
  font-size: 16px;
  text-decoration: none;
  white-space: nowrap;
}
.navlogin:hover { color: var(--color-dark-orange); }
.btn-nav-download { padding: 6px 12px; font-size: 14px; }

/* 地区浮层 */
.region-wrap { position: relative; }
.region-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 220px;
  padding: 6px 0;
  margin: 0;
  list-style: none;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, .18);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.region-wrap:hover .region-pop,
.region-wrap:focus-within .region-pop { opacity: 1; visibility: visible; transform: translateY(0); }
.region-pop a { display: block; padding: 9px 16px; font-size: 15px; color: #212529; text-decoration: none; }
.region-pop a:hover { background: var(--color-light-cream); }

/* 汉堡按钮（移动端） */
.navtoggle {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  color: #fff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 4px;
  font-size: 15px;
  cursor: pointer;
}
.burger { position: relative; display: inline-block; width: 18px; height: 12px; }
.burger::before, .burger::after {
  content: ''; position: absolute; left: 0; width: 18px; height: 2px; background: #fff;
}
.burger::before { top: 0; box-shadow: 0 5px 0 #fff; }
.burger::after { bottom: 0; }

/* ===========================  1. 下载 TallyPrime  =========================== */
.hero { padding: 96px 0 49px; background: #fff; }

/* 浅蓝笔刷背景作用于 1140 容器（与原站一致），而非整幅 section */
.hero-brush {
  background: url('assets/brush-blue.svg') no-repeat 0 0;
  background-size: contain;
  padding: 0 12px 48px;
}
.hero h2 { text-align: center; }

/* 两张下载卡：原站为 760px 行 + 16px 内边距 → 每张 364px，卡片之间无间距 */
.dl-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  max-width: 760px;
  margin: 48px auto 0;
}
.hero .dl-grid { padding: 0 16px; }

.dl-card {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.dl-card-top { padding: 24px 20px 0; text-align: center; }
.dl-card-logo { width: 10rem; height: auto; }
.dl-card h3 {
  margin: 16px 0 12px;
  font-size: 32px;
  font-weight: 500;
  line-height: 1.3;
  color: #212529;
}
.dl-card p { margin: 0; font-size: 16px; color: var(--color-gray); }
.dl-card hr {
  width: calc(100% - 40px);
  margin: 20px auto 0;
  border: 0;
  border-top: 1px solid var(--color-hr);
}
.dl-card-bottom { padding: 18px 20px 24px; margin-top: auto; text-align: center; }

.dl-note {
  margin: 40px 0 0;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: #212529;
}
.dl-note a { color: var(--color-light-blue); text-decoration: none; }
.dl-note a img { margin-left: 2px; }

/* ===========================  2. What's new（深蓝）  =========================== */
.whatsnew {
  padding: 96px 0 46px;
  background-color: var(--color-light-blue);
  background-image: url('assets/blue-brand-line.svg');
  background-repeat: no-repeat;
  background-position: right 0 top 130px;
  background-size: 22rem;
}
.whatsnew h2 { color: #fff; }

.wn-rows { margin-top: 80px; display: grid; gap: 30px; }
/* 3 张卡占 4 列中的前 3 列，右侧留白（与原站 col-lg-3 布局一致） */
.wn-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }

.wn-card {
  padding: 1.5rem;
  background: var(--color-light-sky);
  border: 1px solid var(--color-light-sky);
  border-radius: var(--radius);
  height: 100%;
}
.wn-card img { width: 2.5rem; height: auto; margin-bottom: 1rem; display: block; }
.wn-card p { margin: 0; font-size: 16px; line-height: 1.4; color: var(--color-gray); }

/* ===========================  3. 其他产品（浅天蓝）  =========================== */
.otherproducts { padding: 96px 0 52px; background: var(--color-light-sky); }
.otherproducts h2 { text-align: center; }
.otherproducts .dl-grid { margin-top: 76px; }

/* ===========================  4. 帮助指南与教程（米黄）  =========================== */
.guides { padding: 96px 0 120px; background: var(--color-light-cream); }
.guides h2 { text-align: center; }

/* 原站轮播：3 张 380px 幻灯片铺满 1140 容器，幻灯片之间无间距，
   每张内部留 14px 内边距 → 缩略图 352×189 */
.carousel { position: relative; margin-top: 56px; }
.carousel-viewport { overflow: hidden; }
.carousel-track {
  display: flex;
  gap: 0;
  transition: transform .45s ease;
  will-change: transform;
}
.slide { flex: 0 0 33.3333%; padding: 0 14px; }
.slide-media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-light-blue);
}
.slide-media img.thumb { display: block; width: 100%; height: auto; }
.slide-media .play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3rem;
  transform: translate(-50%, -50%);
  cursor: pointer;
  transition: transform .2s ease;
}
.slide-media:hover .play { transform: translate(-50%, -50%) scale(1.12); }

.carousel-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.carousel-btn:disabled { opacity: .3; cursor: default; }
.carousel-btn.prev { left: -42px; }
.carousel-btn.next { right: -42px; }

/* ===========================  5. 发行说明 + 旧版本  =========================== */
.releasewrap { display: grid; grid-template-columns: 1fr 1fr; }

.release-notes { background: #fff; padding: 64px 0 64px; }
.release-notes h2 { text-align: center; }
.rn-list { max-width: 540px; margin: 32px auto 0; padding: 0 12px; }

.rn-item { display: block; text-decoration: none; color: var(--color-gray); }
.rn-item .rn-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 30px 0;
}
.rn-item h4 { margin: 0; font-size: 20px; font-weight: 500; color: var(--color-gray); }
.rn-item .rn-arrow { flex: 0 0 auto; transition: transform .3s ease-in-out; }
.rn-item hr { margin: 6px 0 0; border: 0; border-top: 2px solid var(--color-light-gray); }
.rn-item:hover h4 { color: var(--color-blue); }
.rn-item:hover .rn-arrow { transform: translate(4px, -4px); }
.rn-item:hover hr { border-top-color: var(--color-blue); }

/* 右侧深蓝面板：标题 64px 起、按钮紧贴标题、插画 512px 贴底 */
.older {
  background-color: var(--color-light-blue);
  background-image: url('assets/blue-brand-line.svg');
  background-repeat: no-repeat;
  background-position: right -40px top 30px;
  background-size: 20rem;
  padding: 64px 20px 0;
  text-align: center;
}
.older h2 { color: #fff; }
.older .btn-primary { margin-top: 8px; padding: .4rem .9rem; }
.older img.older-illu {
  display: block;
  width: 32rem;
  max-width: 100%;
  margin: 96px auto 0;
}

/* ===========================  页脚  =========================== */
.footer { background: var(--color-light-blue); color: #fff; padding: 0 8px 24px; }

.footer-intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 28px 12px;
  margin-top: 48px;
  border-top: 1px solid var(--color-footer-line);
  border-bottom: 1px solid var(--color-footer-line);
}
.footer-logo img { max-width: 100px; height: auto; }
.footer-intro p { margin: 0; max-width: 620px; font-size: 15px; line-height: 1.7; }
.text-orange { color: var(--color-dark-orange); }
.footer-intro a { color: var(--color-dark-orange); text-decoration: none; }
.footer-intro a img { margin-left: 2px; transition: transform .3s ease-in-out; }
.footer-intro a:hover img { transform: translate(4px, -4px); }

.footer-cols { display: flex; flex-wrap: wrap; margin-top: 48px; }
.footer-col { flex: 0 0 25%; max-width: 25%; padding-right: 16px; }
.footer-col h5 { margin: 0 0 12px; font-size: 18px; font-weight: 500; color: var(--color-dark-orange); }
.footer-col h5.h5-spacer { visibility: hidden; }
.footer-col ul { margin: 0; padding: 0; list-style: none; }
.footer-col li { line-height: 200%; }
.footer-col a, .footer-col address { font-size: 16px; font-style: normal; color: #fff; text-decoration: none; }
.footer-col a:hover { text-decoration: underline; }
.footer-col address { font-size: 15px; line-height: 1.7; }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid var(--color-footer-line);
  font-size: 14px;
}
.footer-bottom .legal { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.footer-bottom a { color: #fff; text-decoration: none; }
.footer-bottom a:hover { text-decoration: underline; }
.footer-social { display: flex; align-items: center; gap: 14px; }
.footer-social img { width: 22px; height: auto; opacity: .95; }
.footer-social a:hover img { opacity: 1; }

/* ===========================  响应式  =========================== */
@media (max-width: 1239.98px) {
  .carousel-btn.prev { left: 0; }
  .carousel-btn.next { right: 0; }
}

@media (max-width: 1199.98px) {
  .whatsnew { background-size: 17rem; background-position: right 0 top 120px; }
  .wn-row { gap: 24px; }
  .wn-rows { gap: 24px; }
  .older img.older-illu { width: 26rem; margin-top: 72px; }
}

@media (max-width: 991.98px) {
  /* 导航折叠：左 Logo / 右 操作区 + 汉堡按钮 */
  .navbar { display: flex; align-items: center; justify-content: space-between; }
  .navmenu { display: none; }
  .navbrand { display: flex; }
  .navtoggle { display: inline-flex; }
  .navright { margin-right: 0; }

  .mainnav.open .navmenu {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    padding: 8px 12px;
    background: var(--color-light-blue);
    box-shadow: 0 14px 24px rgba(0, 0, 0, .22);
  }
  .mainnav.open .navmenu > li > a { justify-content: space-between; padding: 12px 8px; }
  .mainnav.open .dropdown {
    position: static;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border-radius: 0;
    background: rgba(255, 255, 255, .96);
  }
  .mainnav.open li.expanded .dropdown { display: block; }

  .topbar-links { display: none; }

  h2 { font-size: 32px; }
  .wn-row { grid-template-columns: repeat(2, 1fr); }
  .releasewrap { grid-template-columns: 1fr; }
  .release-notes { padding: 48px 0 40px; }
  .guides { padding: 56px 0 64px; }
  .whatsnew { padding: 56px 0 40px; }
  .otherproducts { padding: 56px 0 40px; }
  .wn-rows { margin-top: 40px; }
  .otherproducts .dl-grid { margin-top: 40px; }
  .dl-grid { margin-top: 32px; }
  .older { padding: 48px 20px 0; }
  .older h2 br { display: none; }
  .footer-col { flex: 0 0 33.333%; max-width: 33.333%; }
}

@media (max-width: 767.98px) {
  /* 小屏导航只保留 Logo / 下载 / 菜单 */
  .navright .icon-link, .navright .region-wrap, .navlogin { display: none; }
  h2 { font-size: 26px; }
  .hero-brush { padding: 24px 12px 28px; }
  .hero { padding: 32px 0 36px; }
  .hero .dl-grid { padding: 0; }
  .dl-grid { grid-template-columns: 1fr; gap: 18px; }
  .dl-card h3 { font-size: 26px; }
  .wn-row { grid-template-columns: 1fr; }
  .whatsnew { background-image: none; }
  .older { background-image: none; }
  .carousel { margin-top: 32px; }
  .carousel-btn.prev { left: -6px; }
  .carousel-btn.next { right: -6px; }
  .slide { flex: 0 0 100%; padding: 0 6px; }
  .older img.older-illu { width: 20rem; margin-top: 48px; }
  .footer-col { flex: 0 0 50%; max-width: 50%; }
  .footer-intro { flex-direction: column; align-items: flex-start; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
  .btn-download { width: 100%; }
}