/* Tongyu-only additions. Shared portfolio styles remain in styles.css. */
.tongyu-card .tongyu-visual { background: #eaf2ff; }
.tongyu-card .visual-index { color: #2761b5; }
.tongyu-cover-copy { position: absolute; z-index: 2; top: 27%; left: 6%; color: #2780ff; }
.tongyu-cover-copy strong { display: block; font-size: clamp(42px, 7vw, 110px); letter-spacing: -.05em; }
.tongyu-cover-copy > span { display: block; margin-top: 14px; font-size: clamp(13px, 1.5vw, 22px); line-height: 1.7; }
.tongyu-cover-screen { position: absolute; width: 53%; height: 112%; object-fit: contain; right: 17%; top: 3%; }
.tongyu-cover-ip { position: absolute; width: 23%; height: 79%; object-fit: contain; right: 3%; bottom: -3%; }
.tongyu-entry-label { position: absolute; right: 32px; bottom: 30px; color: #89b8ff; font-size: 12px; }
.tongyu-page { --ty-blue: #2780ff; --ty-ink: #202934; --ty-soft: #ebeff4; }
.ty-project-bar { display: flex; justify-content: space-between; gap: 16px; max-width: 1600px; margin: 104px auto 24px; padding-inline: var(--page-pad); font-size: 12px; color: #c5cdd7; transform: translateY(24px); }
.ty-project-bar nav { display: flex; gap: 28px; }
.ty-project-bar a:hover { color: var(--cyan); }
.ty-main { width: min(100%, 1600px); margin: auto; background: white; color: var(--ty-ink); }
.ty-main article, .ty-main section { scroll-margin-top: 82px; }
.ty-main img { display: block; max-width: 100%; height: auto; }
.ty-main h1, .ty-main h2, .ty-main h3, .ty-main h4 { margin: 0; line-height: 1.35; }
.ty-main h2 { font-size: clamp(27px, 3.4vw, 56px); font-weight: 650; color: var(--ty-blue); }
.ty-main h3 { font-size: clamp(23px, 2.7vw, 42px); font-weight: 650; }
.ty-main h4 { font-size: clamp(17px, 1.5vw, 24px); font-weight: 650; }
.ty-main p { font-size: clamp(15px, 1.2vw, 19px); line-height: 1.95; overflow-wrap: break-word; }
.ty-main .ty-label { font-size: clamp(10px, .85vw, 14px); letter-spacing: .08em; line-height: 1.7; }
.ty-main .ty-copy > * + * { margin-top: 20px; }
.ty-main .ty-copy > h4 { margin-top: 30px; }
.ty-section { padding: clamp(48px, 6vw, 96px) 6.25%; }
.ty-section-heading { position: relative; padding-top: 22px; margin-bottom: 32px; isolation: isolate; }
.ty-section-heading .ty-label { margin-top: 8px; color: #6685ad; }
.ty-number { position: absolute; z-index: -1; left: 8%; top: -32px; font-size: clamp(92px, 11vw, 168px); font-weight: 600; line-height: 1; color: #edf3fb; }
.ty-blue { color: white; background: #2780ff; }
.ty-main .ty-blue h2, .ty-main .ty-blue h3 { color: white; }
.ty-blue .ty-number { color: #4995ff; }
.ty-light { background: #ebeff4; }
.ty-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 5%; }
.ty-split > *, .ty-section-lead > *, .ty-system-grid > * { min-width: 0; }
.ty-product-hero { overflow: hidden; padding-top: clamp(36px, 5vw, 84px); }
.ty-hero-intro { display: grid; grid-template-columns: 1fr 3fr; gap: 7%; margin-inline: 6.25%; align-items: start; }
.ty-main .ty-brand { width: 100%; max-width: 286px; margin-bottom: 24px; }
.ty-hero-art { position: relative; aspect-ratio: 1920 / 850; margin-top: 38px; background: linear-gradient(0deg, #ebeff4 0 12%, transparent 12%); }
.ty-main .ty-hero-watermark { position: absolute; left: 15%; top: 25%; width: 100%; white-space: nowrap; color: #ebeff4; font-size: clamp(30px, 6.7vw, 110px); font-weight: 700; }
.ty-main .ty-desktop-mockup { position: absolute; width: 46%; height: 100%; object-fit: contain; left: 17%; bottom: -1%; }
.ty-hero-side { position: absolute; right: 6%; top: 7%; width: 32%; }
.ty-main .ty-hand-mockup { width: 29%; margin: 0 auto 28px; }
.ty-main h1 { color: #2780ff; font-size: clamp(22px, 3.2vw, 50px); }
.ty-main h1 > span { display: block; margin-bottom: 6px; font-size: .4em; letter-spacing: .22em; }
.ty-main .ty-hero-inset { position: absolute; width: 27%; left: 6.25%; bottom: 12%; }
.ty-intro-top { display: grid; grid-template-columns: 1fr 1.25fr; gap: 8%; align-items: start; }
.ty-dashboard { border: 5px solid #10151a; border-radius: 8px; aspect-ratio: 902 / 524; overflow: hidden; }
.ty-dashboard img { width: 100%; }
.ty-main .ty-dashboard-strip { width: 75%; margin: -11% 0 3% auto; position: relative; }
.ty-role-layout { align-items: center; }
.ty-role-layout .ty-copy p { font-size: clamp(14px, 1.08vw, 18px); }
.ty-payment .ty-section { padding-bottom: 32px; }
.ty-payment-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 1040px; list-style: none; padding: 0; margin: 32px 0; }
.ty-payment-flow li { display: flex; gap: 12px; align-items: center; min-width: 0; }
.ty-payment-flow li > span { flex: 1; padding: 10px 8px; border-radius: 99px; text-align: center; color: white; background: #2780ff; font-size: clamp(12px, 1.25vw, 19px); }
.ty-main .ty-flow-arrow { flex: 0 0 18px; width: 18px; height: 18px; }
.ty-payment-art { position: relative; display: flex; align-items: center; min-height: 400px; padding: 3% 6.25%; margin-top: 130px; }
.ty-payment-forms { display: flex; width: 53%; align-items: start; gap: 6px; }
.ty-payment-forms img:first-child { width: 43%; }
.ty-payment-forms img:last-child { width: 56%; }
.ty-main .ty-laptop { position: absolute; right: -2%; width: 61%; bottom: -12%; }
.ty-app-store { display: grid; grid-template-columns: 1.3fr 1fr; align-items: center; margin-top: 110px; padding-right: 6.25%; }
.ty-app-store > figure { align-self: stretch; display: flex; align-items: end; overflow: hidden; }
.ty-app-store > figure img { width: 110%; max-width: none; }
.ty-app-store > .ty-copy { padding-block: 40px; }
.ty-app-icon { display: grid; width: 86px; height: 86px; padding: 18px 22px; border-radius: 20px; background: #2780ff; }
.ty-main .ty-app-icon img { width: 100%; height: 100%; }
.ty-app-store .ty-section-heading { margin-top: 26px; }
.ty-system-grid { display: grid; grid-template-columns: 1fr 1.7fr; gap: 7%; }
.ty-system-grid > div > h3 { font-size: clamp(19px, 1.7vw, 28px); }
.ty-principles { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 20px 0 0; margin-top: 42px; }
.ty-principles > div { display: flex; flex-direction: column; justify-content: center; align-items: center; aspect-ratio: 1; text-align: center; color: white; border-radius: 50%; background: #2780ff; box-shadow: 0 0 22px #2780ff55; padding: 20px 8px; }
.ty-principles > div:first-child { width: 52%; grid-column: 1 / -1; justify-self: center; margin-bottom: -12%; z-index: 1; }
.ty-principles strong { font-size: clamp(19px, 2vw, 32px); font-weight: 500; }
.ty-principles span { font-size: 12px; }
.ty-main .ty-principles p { font-size: 11px; margin-top: 10px; line-height: 1.5; }
.ty-atoms { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; padding-block: 30px; }
.ty-atom-glyph { position: relative; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; width: 54px; height: 54px; margin-bottom: 20px; }
.ty-main .ty-atom-glyph img { width: 25px; height: 25px; }
.ty-main .ty-atom-glyph-0 img { width: 52px; height: 52px; }
.ty-atom > span { font-size: 11px; }
.ty-main .ty-atom p { font-size: 13px; margin-top: 20px; line-height: 2.3; }
.ty-section-lead { display: grid; grid-template-columns: 1fr 3fr; gap: 5%; align-items: start; margin-bottom: 40px; }
.ty-section-lead .ty-section-heading { margin-bottom: 0; }
.ty-section-lead > p, .ty-section-lead .ty-copy p { font-size: clamp(14px, 1.08vw, 17px); }
.ty-library { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: 12px; }
.ty-library figcaption, .ty-interactions figcaption { margin-bottom: 12px; font-size: 13px; line-height: 1.6; }
.ty-library a, .ty-interactions a { display: block; }
.ty-library img, .ty-interactions img { width: 100%; }
.ty-interactions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: 24px 12px; }
.ty-interactions figure:nth-child(4) { grid-column: 4; grid-row: 1 / 3; }
.ty-ip-inner { width: min(100% - 48px, 960px); margin-inline: auto; }
.ty-ip-section { padding-block: clamp(48px, 5vw, 80px); }
.ty-ip-section h3 { color: #2780ff; margin-bottom: 24px; }
.ty-ip-hero { overflow: hidden; }
.ty-ip-hero > .ty-ip-inner { position: relative; min-height: 440px; padding-block: 40px; }
.ty-ip-hero-copy { position: relative; z-index: 2; width: 47%; }
.ty-main .ty-ip-brand { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.ty-main .ty-ip-brand img { width: 32px; height: 40px; }
.ty-main #ip-title { font-size: clamp(36px, 4.5vw, 68px); margin-top: 80px; }
.ty-main .ty-stamp { display: flex; align-items: center; gap: 10px; margin-block: 10px 18px; font-size: clamp(11px, 1.2vw, 18px); font-weight: 500; letter-spacing: .025em; line-height: 1.4; }
.ty-stamp > span { border: 1px solid currentColor; padding: 2px 7px; font-size: .8em; }
.ty-main .ty-ip-hero-character { position: absolute; width: 45%; height: 120%; object-fit: contain; object-position: top; top: 5%; right: 9%; z-index: 1; }
.ty-main .ty-ip-watermark { position: absolute; white-space: nowrap; top: 10%; right: 0; font-size: clamp(38px, 7.4vw, 120px); opacity: .6; font-weight: 600; }
.ty-main .ty-planet { position: absolute; right: 1%; bottom: 14%; width: 40px; height: 40px; }
.ty-views { padding-top: 16px; }
.ty-main .ty-views img { width: 80%; margin-inline: auto; }
.ty-sketch { background: repeating-linear-gradient(transparent 0 35px, #d5d9df 35px 36px); }
.ty-views figcaption { display: grid; grid-template-columns: repeat(3, 1fr); width: 80%; margin: 20px auto 0; text-align: center; font-size: 12px; color: #666; letter-spacing: .1em; }
.ty-render { padding-block: 44px; }
.ty-concept { padding-block: 48px; }
.ty-concept-heading { width: 50%; margin-left: auto; }
.ty-concept-grid { display: grid; grid-template-columns: 1fr 1.5fr 1fr; gap: 22px; align-items: center; }
.ty-concept-note + .ty-concept-note { margin-top: 32px; }
.ty-main .ty-note-icon { width: 48px; height: 48px; object-fit: contain; margin-bottom: 14px; }
.ty-main .ty-concept p:not(.ty-stamp) { font-size: 13px; line-height: 1.85; }
.ty-logo-note { padding-top: 80px; }
.ty-ring-icon { display: block; position: relative; width: 48px; height: 58px; margin-bottom: 14px; }
.ty-ring-icon img { position: absolute; width: 100%; height: 100%; object-fit: contain; }
.ty-main .ty-ring-icon img:nth-child(2) { width: 65%; left: 20%; }
.ty-main .ty-ring-icon img:nth-child(3) { width: 45%; left: 30%; }
.ty-scene-heading { display: flex; justify-content: space-between; gap: 24px; align-items: start; }
.ty-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 50px 100px; max-width: 820px; margin: 28px auto 0; }
.ty-action { position: relative; padding: 0 18px; text-align: center; isolation: isolate; }
.ty-action::before { position: absolute; content: ""; z-index: -1; inset: 17% 0 18%; background: #edf2f7; border-radius: 24px; }
.ty-main .ty-action img { width: 100%; height: 350px; object-fit: contain; }
.ty-action figcaption { display: inline-block; padding: 9px 28px; background: #2780ff; border-radius: 99px; color: white; font-size: 16px; }
.ty-scene { padding-block: 36px; }
.ty-scene.ty-blue { background: radial-gradient(ellipse at center, #4fb7ff, #2780ff); }
.ty-scene.ty-light { background: radial-gradient(ellipse at center, #cce1ff, #fff); color: #2780ff; }
.ty-scene-art { margin: 26px auto 10px; }
.ty-main .ty-scene-art > img { width: 100%; height: 450px; object-fit: contain; }
.ty-main .ty-scene-caption { max-width: 690px; margin-inline: auto; text-align: center; font-size: 11px; line-height: 1.8; }
.ty-security-art { display: flex; align-items: center; justify-content: center; }
.ty-main .ty-security-art img { width: 54%; height: 450px; object-fit: contain; }
.ty-main .ty-security-art img + img { width: 40%; margin-left: -9%; }
.ty-merchandise { position: relative; aspect-ratio: 1000 / 620; max-width: 860px; margin: 24px auto 0; }
.ty-main .ty-bag { position: absolute; width: 36%; left: 35%; top: 2%; }
.ty-main .ty-pillow { position: absolute; width: 50%; left: 3%; bottom: 1%; }
.ty-main .ty-cards { position: absolute; width: 43%; right: 0; bottom: 6%; }
.ty-footer { max-width: 1600px; margin: 0 auto; padding-inline: var(--page-pad); }
@media (max-width: 1000px) {
  .ty-payment-art { min-height: 280px; margin-top: 70px; }
  .ty-system-grid { grid-template-columns: 1fr; gap: 50px; }
  .ty-principles { width: min(100%, 390px); margin-inline: auto; }
  .ty-section-lead { grid-template-columns: 1fr; gap: 28px; }
  .ty-concept-grid { grid-template-columns: 1fr 1.2fr; }
  .ty-logo-note { grid-column: 1 / -1; padding-top: 0; }
  .ty-concept-heading { width: 100%; margin-bottom: 28px; }
  .ty-actions { gap: 32px 50px; }
  .ty-main .ty-action img { height: 300px; }
}
@media (max-width: 700px) {
  .tongyu-card .tongyu-visual { aspect-ratio: 4 / 3; }
  .tongyu-cover-copy { top: 16%; }
  .tongyu-cover-copy strong { font-size: 44px; }
  .tongyu-cover-copy > span { font-size: 12px; }
  .tongyu-cover-screen { width: 73%; height: 83%; right: 12%; top: 32%; }
  .tongyu-cover-ip { width: 27%; height: 56%; right: 1%; bottom: 0; }
  .tongyu-entry-label { right: 24px; bottom: 24px; }
  .ty-project-bar { margin-top: 90px; font-size: 11px; padding-inline: 20px; }
  .ty-project-bar nav { gap: 14px; }
  .ty-section { padding: 48px 22px; }
  .ty-main h2 { font-size: 28px; }
  .ty-main h3 { font-size: 25px; }
  .ty-hero-intro { grid-template-columns: 1fr; gap: 24px; margin-inline: 22px; }
  .ty-main .ty-brand { max-width: 185px; margin-bottom: 12px; }
  .ty-hero-art { aspect-ratio: auto; height: 420px; }
  .ty-main .ty-desktop-mockup { width: 73%; height: 73%; left: 12%; }
  .ty-hero-side { top: 0; width: auto; left: 22px; right: 22px; }
  .ty-main .ty-hand-mockup { position: absolute; width: 65px; right: 0; top: 0; }
  .ty-main h1 { font-size: 25px; max-width: 240px; }
  .ty-main .ty-hero-watermark { font-size: 32px; top: 30%; left: 4%; }
  .ty-main .ty-hero-inset { width: 35%; left: 3%; }
  .ty-intro-top, .ty-split { grid-template-columns: 1fr; gap: 30px; }
  .ty-dashboard { border-width: 3px; }
  .ty-main .ty-dashboard-strip { width: 100%; margin: -8% 0 24px; }
  .ty-role-layout > figure { max-width: 440px; margin-inline: auto; }
  .ty-payment-flow { grid-template-columns: 1fr; gap: 10px; }
  .ty-payment-flow li { display: grid; grid-template-columns: 1fr; gap: 10px; justify-items: center; }
  .ty-payment-flow li > span { width: 100%; padding: 12px; font-size: 16px; }
  .ty-flow-arrow { transform: rotate(90deg); }
  .ty-payment-art { min-height: 0; padding: 24px 22px 0; margin-top: 0; flex-direction: column; }
  .ty-payment-forms { width: 100%; }
  .ty-main .ty-laptop { position: relative; width: 110%; max-width: none; right: auto; bottom: auto; margin-top: 20px; }
  .ty-app-store { grid-template-columns: 1fr; padding: 42px 22px 0; margin-top: 48px; }
  .ty-app-store > .ty-copy { grid-row: 1; padding-top: 0; }
  .ty-app-store > figure img { width: 100%; }
  .ty-main .ty-app-icon { width: 66px; height: 66px; padding: 14px 17px; border-radius: 16px; }
  .ty-atoms { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 14px; }
  .ty-library { grid-template-columns: 1fr 1fr; gap: 28px 12px; }
  .ty-interactions { grid-template-columns: 1fr; gap: 32px; }
  .ty-interactions figure:nth-child(4) { grid-column: auto; grid-row: auto; }
  .ty-interactions figure { width: min(100%, 430px); margin-inline: auto; }
  .ty-ip-inner { width: calc(100% - 44px); }
  .ty-ip-hero > .ty-ip-inner { min-height: 530px; padding-top: 30px; }
  .ty-ip-hero-copy { width: 100%; }
  .ty-main #ip-title { margin-top: 35px; font-size: 42px; }
  .ty-ip-hero-copy > p:not(.ty-ip-brand):not(.ty-stamp) { width: 51%; font-size: 12px; }
  .ty-main .ty-ip-hero-character { width: 70%; height: 65%; right: -12%; top: auto; bottom: -9%; }
  .ty-main .ty-ip-watermark { top: 42%; right: 0; font-size: 47px; }
  .ty-main .ty-planet { right: 0; top: 40px; width: 30px; height: 30px; }
  .ty-main .ty-views img, .ty-views figcaption { width: 100%; }
  .ty-views figcaption { font-size: 10px; }
  .ty-sketch { background-size: 100% 26px; }
  .ty-concept-grid { display: flex; flex-direction: column; align-items: stretch; }
  .ty-concept-grid > figure { width: min(100%, 340px); margin-inline: auto; }
  .ty-main .ty-concept p:not(.ty-stamp) { font-size: 15px; }
  .ty-main .ty-note-icon { width: 40px; height: 40px; }
  .ty-scene-heading { flex-wrap: wrap; gap: 10px; }
  .ty-scene-heading h3 { width: 100%; }
  .ty-main .ty-stamp { font-size: 13px; }
  .ty-actions { gap: 30px 16px; }
  .ty-action { padding-inline: 3px; }
  .ty-main .ty-action img { height: clamp(155px, 40vw, 260px); }
  .ty-action figcaption { font-size: 13px; padding: 8px 16px; }
  .ty-action::before { border-radius: 14px; }
  .ty-main .ty-scene-art > img, .ty-main .ty-security-art img { height: auto; min-height: 200px; }
  .ty-main .ty-scene-caption { font-size: 11px; }
  .ty-main .ty-kv-checkin { max-height: 360px; }
  .ty-footer { padding-inline: 22px; font-size: 10px; }
}