:root {
  --ink:#142338;
  --muted:#536173;
  --blue:#1851be;
  --navy:#142d50;
  --line:#dce2e9;
  --soft:#f5f5f5;
  --lime:#d5f66c;
  --header-height:88px;
  --ease:cubic-bezier(.2,.7,.3,1);
  --feedback-fast:180ms;
  --feedback-soft:240ms;
}
* {
  box-sizing:border-box;
}
html {
  scroll-behavior:smooth;
  scroll-padding-top:var(--header-height);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  color:var(--ink);
  background:#fff;
}
body {
  margin:0;
  font-size:15px;
}
a {
  color:inherit;
  text-decoration:none;
}
img {
  display:block;
  max-width:100%;
  height:auto;
}
figure,dl,dd {
  margin:0;
}
p {
  line-height:1.75;
  margin:0 0 18px;
}
h1,h2,h3 {
  margin:0;
  line-height:1.3;
}
h1 {
  font-size:64px;
  letter-spacing:-2px;
  font-weight:650;
}
h2 {
  font-size:40px;
  letter-spacing:-1px;
  font-weight:650;
}
h3 {
  font-size:20px;
  font-weight:600;
}
a:focus-visible,summary:focus-visible {
  outline:3px solid #e8ad32;
  outline-offset:5px;
}
.container {
  max-width:1120px;
  margin:0 auto;
  padding:0 40px;
}
.section {
  padding:80px 0;
}
.section-heading {
  margin-bottom:32px;
}
.section-heading p {
  font-size:15px;
  color:var(--muted);
  margin:18px 0 0;
}
.eyebrow {
  font-size:13px;
  letter-spacing:1px;
  color:var(--blue);
  margin-bottom:18px;
}
.intro {
  font-size:17px;
  color:var(--muted);
  line-height:1.85;
}
.small {
  font-size:12px;
}
.site-header {
  height:var(--header-height);
  position:sticky;
  top:0;
  z-index:10;
  padding:14px 24px;
  background:#fff;
}
.header-inner {
  max-width:1088px;
  margin:auto;
  padding:0 7px 0 18px;
  border:1px solid var(--line);
  border-radius:40px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:60px;
  gap:24px;
  background:#fff;
}
.brand {
  display:inline-flex;
  gap:10px;
  align-items:center;
  white-space:nowrap;
  font-size:16px;
  font-weight:650;
}
.brand img {
  width:36px;
  height:36px;
  object-fit:contain;
}
.header-inner nav {
  display:flex;
  gap:22px;
  align-items:center;
  font-size:13px;
}
.header-inner nav a {
  padding:12px 0;
  min-height:44px;
  display:inline-flex;
  align-items:center;
}
.header-download {
  font-size:13px;
  font-weight:600;
  color:#fff;
  background:var(--blue);
  border-radius:24px;
  padding:0 19px;
  white-space:nowrap;
  height:44px;
  min-height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1.5;
}
.hero {
  padding:56px 32px 0;
  text-align:center;
  overflow:hidden;
}
.hero-copy {
  max-width:760px;
  margin:0 auto;
}
.hero h1 {
  margin-bottom:18px;
}
.hero-tagline {
  font-size:24px;
  font-weight:600;
  line-height:1.6;
  margin-bottom:16px;
}
.actions {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin-top:26px;
}
.button {
  min-height:52px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid transparent;
  border-radius:28px;
  padding:14px 28px;
  font-size:18px;
  font-weight:700;
  line-height:1.5;
  transition:background-color var(--feedback-fast) var(--ease),border-color var(--feedback-fast) var(--ease),box-shadow var(--feedback-fast) var(--ease),transform var(--feedback-fast) var(--ease);
}
.primary {
  background:var(--blue);
  color:white;
  width:260px;
  max-width:100%;
}
.secondary {
  border-color:var(--line);
  min-width:182px;
}
.hero-meta {
  margin:16px 0 0;
  color:var(--muted);
}
.hero-meta span {
  margin:0 10px;
}
.hero-media {
  position:relative;
  width:min(690px,100%);
  height:460px;
  margin:48px auto 0;
  background:#f4f6f8;
  border:1px solid var(--line);
  border-bottom:0;
  border-radius:24px 24px 0 0;
}
.hero-media figure {
  position:absolute;
  border:1px solid var(--line);
  background:#fff;
  border-radius:14px 14px 0 0;
  overflow:hidden;
  text-align:left;
}
.hero-media figure img {
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top;
}
.hero-browser {
  width:260px;
  height:360px;
  left:72px;
  top:100px;
}
.hero-translation {
  width:296px;
  height:422px;
  right:70px;
  top:38px;
}
.hero-media figcaption {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:12px 16px;
  background:#fff;
  border-top:1px solid var(--line);
  font-size:12px;
}
.dark {
  background:var(--navy);
  color:#fff;
}
.reading {
  padding:80px 0;
}
.reading-grid {
  display:grid;
  grid-template-columns:1fr 360px;
  gap:80px;
  align-items:center;
}
.dark .eyebrow {
  color:#c7d8f4;
}
.reading h2 {
  font-size:48px;
  margin-bottom:24px;
}
.dark .intro {
  color:#d0d9e6;
}
.reading-options {
  padding:0;
  list-style:none;
  margin:28px 0 0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.reading-options li {
  font-size:13px;
  padding:10px 14px;
  border:1px solid #61748f;
  border-radius:999px;
}
.reading-image {
  max-width:300px;
  justify-self:center;
  border:1px solid #a7b5c8;
  border-radius:12px;
  overflow:hidden;
}
.reading-image img {
  width:100%;
}
.words {
  padding:64px 0;
}
.words-grid {
  display:grid;
  grid-template-columns:1fr 1.15fr;
  gap:72px;
  align-items:center;
}
.words h2 {
  font-size:36px;
}
.words .section-heading {
  margin-bottom:0;
}
.word-list {
  background:var(--soft);
  border-radius:26px;
  padding:8px 24px;
}
.word-list>div {
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:16px;
  padding:12px 0;
  border-bottom:1px solid #e3e6ea;
}
.word-list>div:last-child {
  border-bottom:0;
}
.word-list dt {
  display:flex;
  flex-direction:column;
  gap:4px;
  font-size:16px;
  color:var(--muted);
  line-height:1.5;
}
.category {
  font-size:12px;
  color:var(--muted);
}
.word-list dd {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-width:108px;
  gap:22px;
  font-size:18px;
  font-weight:600;
}
.word-list dd::before {
  content:"→";
  font-size:18px;
  font-weight:400;
  color:#9ba4af;
}
.features {
  background:var(--soft);
}
.features .container,.voices .container {
  max-width:1320px;
  padding:0 48px;
}
.features .section-heading {
  text-align:center;
  margin-bottom:38px;
}
.feature-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
  grid-auto-rows:auto;
  align-items:stretch;
}
.feature-card {
  padding:26px 24px 28px;
  background:white;
  border-radius:30px;
  min-width:0;
  transition:box-shadow var(--feedback-soft) var(--ease);
}
.feature-card h3 {
  font-size:20px;
  line-height:1.4;
  margin:22px 0 12px;
  letter-spacing:-.025em;
  color:#111214;
}
.feature-card p {
  font-size:15px;
  line-height:1.75;
  color:#62656a;
  margin:0;
}
.feature-mini {
  display:flex;
  align-items:center;
  gap:8px;
  height:54px;
  position:relative;
  font-size:13px;
  font-weight:600;
  white-space:nowrap;
}
.selected {
  background:var(--lime);
  border-radius:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:#253609;
}
.language-mini {
  padding:7px;
  border:2px dashed #d5d5d5;
  border-radius:14px;
  justify-content:space-between;
}
.language-mini>span:first-child {
  padding:7px;
  color:#777;
}
.language-mini .selected {
  padding:6px 12px;
}
.mini-arrow {
  color:#858585;
}
.bookmark-mini {
  padding-left:4px;
  gap:6px;
  max-width:none;
}
.mini-sheet {
  background:#f3f3f3;
  border-radius:10px;
  padding:9px;
  width:55px;
  transform:rotate(-7deg);
}
.mini-sheet:nth-child(2) {
  transform:rotate(5deg);
  background:#edf0fa;
}
.mini-sheet .icon {
  width:15px;
  height:15px;
  color:var(--blue);
}
.mini-sheet b {
  height:3px;
  display:block;
  background:#d1d5df;
  border-radius:5px;
  margin-top:4px;
}
.mini-sheet b:last-child {
  width:70%;
}
.saved-mark {
  display:grid;
  place-items:center;
  background:var(--lime);
  width:30px;
  height:30px;
  border-radius:50%;
  margin-left:auto;
}
.free-mini {
  background:var(--soft);
  border-radius:30px;
  padding:6px;
  gap:10px;
  color:#62656a;
  font-size:12px;
  justify-content:space-between;
}
.free-mini .selected {
  height:40px;
  padding:0 11px;
}
.dns-mini {
  gap:7px;
}
.shield-circle {
  width:40px;
  height:40px;
  background:var(--soft);
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--blue);
  flex:none;
}
.dns-mini>.selected {
  padding:9px 12px;
  gap:7px;
  font-size:12px;
}
.dns-path {
  width:22px;
  border-top:2px dotted #c9cccf;
  flex:1;
}
.status-dot {
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#6b9c16;
  flex:none;
}
.icon {
  display:inline-block;
  width:20px;
  height:20px;
  background:currentColor;
  mask:var(--icon) center/contain no-repeat;
  -webkit-mask:var(--icon) center/contain no-repeat;
  flex-shrink:0;
}
.icon-download {
  --icon:url('../images/icon-download.svg');
  width:18px;
  height:18px;
  margin-right:8px;
}
.icon-bookmark {
  --icon:url('../images/icon-bookmark.svg');
}
.icon-shield-check {
  --icon:url('../images/icon-shield-check.svg');
}
.icon-check {
  --icon:url('../images/icon-check.svg');
  width:16px;
  height:16px;
}
.voices .section-heading {
  text-align:center;
}
.voice-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}
.voice {
  display:flex;
  flex-direction:column;
  padding:28px;
  background:var(--soft);
  border-radius:30px;
}
.voice-kind {
  font-size:18px;
  color:#62656a;
  margin-bottom:18px;
  letter-spacing:.04em;
}
.voice-text {
  font-size:16px;
  line-height:1.85;
  margin:0;
}
.voice-author {
  display:flex;
  gap:12px;
  align-items:center;
  margin-top:auto;
}
.reader-avatar {
  width:38px;
  height:38px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#e5eaf1;
  color:#3b5777;
  font-size:13px;
  flex:none;
}
.voice:nth-child(3n+2) .reader-avatar {
  background:#eae6f2;
  color:#716089;
}
.voice:nth-child(3n) .reader-avatar {
  background:#e9ebdb;
  color:#6d7448;
}
.voice-author h3 {
  font-size:14px;
  letter-spacing:0;
  margin-bottom:6px;
}
.voice time {
  font-size:11px;
  color:#62656a;
  white-space:nowrap;
}
.faq {
  padding-top:32px;
}
.faq-grid {
  display:block;
  max-width:930px;
}
.faq .section-heading {
  text-align:center;
  margin-bottom:36px;
}
.faq-list {
  display:grid;
  gap:12px;
}
details {
  background:var(--soft);
  border-radius:22px;
  padding:18px 26px;
}
summary {
  cursor:pointer;
  font-size:16px;
  font-weight:600;
  line-height:1.6;
  min-height:44px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  list-style:none;
}
summary::-webkit-details-marker {
  display:none;
}
.faq-toggle {
  display:grid;
  place-items:center;
  width:30px;
  height:30px;
  flex:none;
  border-radius:50%;
  background:#e9e9e9;
  color:inherit;
}
.faq-toggle::before {
  content:"";
  display:block;
  width:14px;
  height:14px;
  background:currentColor;
  mask:url('../images/icon-plus.svg') center/contain no-repeat;
  -webkit-mask:url('../images/icon-plus.svg') center/contain no-repeat;
}
details[open] .faq-toggle::before {
  mask-image:url('../images/icon-minus.svg');
  -webkit-mask-image:url('../images/icon-minus.svg');
}
details p {
  color:var(--muted);
  font-size:14px;
  line-height:1.85;
  margin:12px 40px 4px 0;
}
.download {
  padding:80px 0;
  text-align:center;
}
.download-inner {
  max-width:760px;
}
.download-logo {
  width:64px;
  height:64px;
  object-fit:contain;
  border-radius:12px;
  margin:0 auto 24px;
}
.download h2 {
  font-size:48px;
  margin-bottom:22px;
}
.download p {
  font-size:16px;
  color:#d0d9e6;
}
.light-button {
  background:#fff;
  color:var(--navy);
  width:260px;
  max-width:100%;
  margin:8px 0 18px;
}
.download .small {
  font-size:12px;
  margin:0;
}
footer {
  padding:40px 0;
}
.footer-inner {
  display:flex;
  justify-content:space-between;
  gap:32px;
  align-items:center;
}
.footer-inner p {
  font-size:12px;
  color:var(--muted);
  margin:10px 0 0;
}
.footer-end {
  text-align:right;
  font-size:13px;
}
.footer-end>a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
}
/* Interaction feedback stays within the existing layout. */
.brand,.header-inner nav a,.footer-end>a {
  transition:color var(--feedback-fast) var(--ease),opacity var(--feedback-fast) var(--ease);
}
.header-inner nav a,.footer-end>a {
  position:relative;
}
.header-inner nav a::after,.footer-end>a::after {
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:7px;
  height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform var(--feedback-fast) var(--ease);
}
.header-inner nav a:focus-visible::after,.footer-end>a:focus-visible::after {
  transform:scaleX(1);
}
.header-download {
  transition:background-color var(--feedback-fast) var(--ease),box-shadow var(--feedback-fast) var(--ease);
}
.voice {
  transition:background-color var(--feedback-soft) var(--ease),box-shadow var(--feedback-soft) var(--ease);
}
details {
  transition:background-color var(--feedback-fast) var(--ease),box-shadow var(--feedback-fast) var(--ease);
}
summary {
  transition:color var(--feedback-fast) var(--ease);
}
.faq-toggle {
  transition:background-color var(--feedback-fast) var(--ease),color var(--feedback-fast) var(--ease);
}
summary:focus-visible {
  color:var(--blue);
}
summary:focus-visible .faq-toggle {
  background:var(--blue);
  color:#fff;
}
@media(hover:hover) and (pointer:fine) {
  .brand:hover {
    opacity:.78;
  }
  .header-inner nav a:hover,.footer-end>a:hover {
    color:var(--blue);
  }
  .header-inner nav a:hover::after,.footer-end>a:hover::after {
    transform:scaleX(1);
  }
  .header-download:hover {
    background:#104ab0;
    box-shadow:0 3px 10px #1851be24;
  }
  .button:hover {
    transform:translateY(-2px);
  }
  .primary:hover {
    background:#104ab0;
    box-shadow:0 7px 18px #1851be26;
  }
  .secondary:hover {
    background:#f1f5fc;
    border-color:#bdcce4;
    box-shadow:0 4px 12px #1423380a;
  }
  .light-button:hover {
    background:#edf2fa;
    box-shadow:0 7px 18px #00000014;
  }
  .feature-card:hover {
    box-shadow:0 12px 28px #1423380d;
  }
  .voice:hover {
    background:#eef2f7;
    box-shadow:0 8px 24px #14233809;
  }
  details:hover {
    background:#eef2f7;
  }
  summary:hover {
    color:var(--blue);
  }
  summary:hover .faq-toggle {
    background:var(--blue);
    color:#fff;
  }
}
.button:active {
  transform:none;
  box-shadow:none;
}
.header-download:active {
  background:#0d409f;
  box-shadow:none;
}
summary:active .faq-toggle {
  background:#104ab0;
  color:#fff;
}
@media(min-width:1440px) {
  .hero {
    padding-top:72px;
  }
}
@media(max-width:1199px) {
  .features .container,.voices .container {
    padding:0 36px;
  }
  .feature-grid {
    gap:18px;
  }
  .feature-card {
    padding:24px 20px 26px;
  }
  .feature-card h3 {
    font-size:19px;
  }
  .feature-mini {
    font-size:12px;
    gap:4px;
  }
  .free-mini {
    font-size:12px;
  }
  .free-mini .selected {
    padding:0 8px;
  }
  .dns-mini>.selected {
    padding:9px 8px;
  }
}
@media(max-width:1000px) {
  .header-inner nav {
    display:none;
  }
  .container {
    padding:0 32px;
  }
  .reading-grid {
    grid-template-columns:1fr 300px;
    gap:40px;
  }
  .words-grid {
    gap:40px;
  }
  .words h2 {
    font-size:32px;
  }
  .feature-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px;
  }
  .feature-card {
    padding:26px;
  }
  .feature-card h3 {
    font-size:20px;
  }
  .feature-mini {
    max-width:230px;
    font-size:13px;
  }
  .free-mini {
    justify-content:flex-start;
    gap:24px;
  }
  .free-mini .selected {
    padding:0 16px;
  }
  .dns-path {
    max-width:40px;
  }
  .voice-grid {
    grid-template-columns:1fr;
    max-width:660px;
    margin-inline:auto;
    gap:16px;
  }
  .voice time {
    font-size:12px;
  }
}
@media(max-width:767px) {
  :root {
    --header-height:72px;
  }
  .site-header {
    padding:10px 16px;
  }
  .header-inner {
    height:52px;
    padding:0 7px 0 12px;
    gap:12px;
  }
  .brand {
    font-size:14px;
    gap:6px;
  }
  .brand img {
    width:28px;
    height:28px;
  }
  .header-download {
    position:relative;
    font-size:12px;
    padding:0 13px;
    height:36px;
    min-height:36px;
  }
  .header-download::before {
    content:"";
    position:absolute;
    inset:-4px 0;
  }
  .container,.features .container,.voices .container {
    padding:0 24px;
  }
  .hero {
    padding:40px 24px 0;
  }
  h1 {
    font-size:clamp(32px,10.4vw,42px);
    letter-spacing:-1px;
  }
  h2 {
    font-size:32px;
  }
  .intro {
    font-size:15px;
  }
  .hero h1 {
    margin-bottom:22px;
  }
  .desktop-break {
    display:none;
  }
  .actions {
    flex-direction:column;
    align-items:stretch;
    gap:10px;
    margin-top:24px;
  }
  .button {
    width:100%;
    min-width:0;
  }
  .hero-tagline {
    font-size:20px;
  }
  .hero-media {
    height:330px;
    margin-top:32px;
    border-radius:16px 16px 0 0;
  }
  .hero-browser {
    width:45%;
    height:250px;
    left:6%;
    top:80px;
  }
  .hero-translation {
    width:54%;
    height:298px;
    right:5%;
    top:32px;
  }
  .hero-media figcaption {
    font-size:11px;
    padding:10px;
  }
  .section {
    padding:52px 0;
  }
  .section-heading {
    margin-bottom:26px;
  }
  .section-heading p {
    font-size:14px;
  }
  .reading {
    padding:56px 0;
  }
  .reading-grid {
    grid-template-columns:1fr;
    gap:30px;
  }
  .reading h2 {
    font-size:36px;
  }
  .reading-options {
    margin-top:22px;
  }
  .reading-options li {
    font-size:12px;
  }
  .reading-image {
    width:260px;
    max-width:100%;
  }
  .words {
    padding:48px 0;
  }
  .words-grid {
    grid-template-columns:1fr;
    gap:24px;
  }
  .word-list {
    padding:6px 20px;
    border-radius:24px;
  }
  .word-list dd {
    font-size:17px;
    min-width:100px;
    gap:18px;
  }
  .features .section-heading {
    margin-bottom:28px;
    text-align:left;
  }
  .feature-grid {
    grid-template-columns:1fr;
    gap:16px;
  }
  .feature-card {
    padding:24px;
    border-radius:28px;
  }
  .feature-mini {
    width:100%;
    max-width:none;
    height:52px;
  }
  .free-mini {
    justify-content:flex-start;
    gap:10px;
  }
  .dns-path {
    max-width:none;
  }
  .feature-card h3 {
    font-size:20px;
    margin-top:20px;
    margin-bottom:10px;
  }
  .feature-card p {
    font-size:15px;
  }
  .voices .section-heading {
    text-align:left;
  }
  .voice-grid {
    grid-template-columns:1fr;
    gap:12px;
  }
  .voice {
    padding:20px 26px;
    border-radius:28px;
  }
  .voice-text {
    font-size:15px;
    line-height:1.85;
    margin-bottom:0;
  }
  .voice-kind {
    margin-bottom:10px;
  }
  .voice time {
    font-size:11px;
  }
  .faq {
    padding-top:16px;
  }
  .faq .section-heading {
    text-align:left;
    margin-bottom:28px;
  }
  .faq-grid {
    padding:0 24px;
  }
  details {
    border-radius:20px;
    padding:16px 20px;
  }
  summary {
    font-size:15px;
    gap:12px;
  }
  .faq-toggle {
    width:28px;
    height:28px;
  }
  details p {
    font-size:14px;
    margin:10px 0 4px;
  }
  .download {
    padding:56px 0;
  }
  .download h2 {
    font-size:36px;
  }
  .download p {
    font-size:14px;
  }
  .footer-inner {
    align-items:flex-start;
    flex-direction:column;
    gap:20px;
  }
  .footer-end {
    display:flex;
    flex-direction:row-reverse;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    width:100%;
    text-align:left;
  }
  .footer-end p {
    margin:0;
  }
  .hero-meta {
    font-size:12px;
  }
}
@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*::before,*::after {
    transition:none!important;
    animation:none!important;
  }
}