:root { scroll-behavior: smooth; }
.landing {
  --ink: #14233a; --navy: #101e32; --navy-soft: #1b304e; --steel: #6c99bf;
  --sky: #bed9ee; --paper: #f5f8fb; --mint: #a7e4d7;
  background: var(--paper); color: var(--ink);
  font-family: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  overflow-x: clip;
}
.landing * { box-sizing: border-box; }
.landing a { text-decoration: none; }
.landing button { font: inherit; }
.landing :focus-visible { outline: 3px solid #7fc9ff; outline-offset: 4px; }
.landing img { display: block; max-width: 100%; }
.landing h1,.landing h2,.landing h3,.landing p { margin: 0; }
.landing h1,.landing h2,.landing h3 { text-wrap: balance; }
.landing main { max-width: none; margin: 0; padding: 0; }
.landing .section-wrap { width: min(100% - 64px, 1320px); margin-inline: auto; }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 100; padding: 12px 18px; background: white; color: var(--ink); border-radius: 8px; }
.skip-link:focus { top: 16px; }

.site-header { position: absolute; inset: 0 0 auto; height: 88px; z-index: 20; color: white; }
.header-inner { width: min(100% - 64px, 1420px); height: 100%; margin: auto; display: flex; align-items: center; gap: 32px; }
.site-brand { display: inline-flex; align-items: center; gap: 11px; color: white; white-space: nowrap; letter-spacing: .09em; font-weight: 800; font-size: 15px; }
.site-brand img { width: 44px; height: 44px; object-fit: contain; }
.site-brand strong { font-weight: 800; }
.site-nav { display: flex; align-items: center; gap: clamp(18px, 2.7vw, 42px); margin-left: auto; }
.site-nav a { color: #d1deeb; font-size: 14px; font-weight: 600; transition: color .25s ease; }
.site-nav a:hover { color: white; }
.site-nav .nav-download { padding: 11px 17px; border: 1px solid rgba(215,234,250,.35); border-radius: 999px; color: white; display: flex; gap: 20px; align-items: center; }
.site-nav .nav-download:hover { background: rgba(255,255,255,.1); }
.header-actions { display: flex; align-items: center; gap: 10px; }
.landing .lang-switch { border-color: rgba(215,234,250,.28); margin: 0; }
.landing .lang-switch button { color: #d1deeb; padding: 4px 9px; }
.landing .lang-switch button[aria-pressed="true"] { background: #dbeaf6; color: var(--navy); }
.menu-toggle { display: none; width: 42px; height: 42px; align-items: center; justify-content: center; flex-direction: column; gap: 6px; border: 1px solid rgba(255,255,255,.3); border-radius: 12px; background: transparent; cursor: pointer; }
.menu-toggle span { width: 18px; height: 2px; background: white; border-radius: 4px; }

.hero-shell { position: relative; background: linear-gradient(180deg, #101e32 0%, #192e49 70%, #223b57 100%); color: #fff; overflow: hidden; isolation: isolate; }
.hero-shell::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 55% 34% at 50% 77%, rgba(117,179,212,.28), transparent 88%); }
.hero-shell::after { content: ""; position: absolute; inset: auto 0 0; height: 50%; z-index: -1; opacity: .3; background: repeating-linear-gradient(90deg, transparent 0 160px, rgba(180,216,239,.09) 161px, transparent 162px); mask-image: linear-gradient(transparent, #000); }
.hero-inner { width: min(100% - 64px, 1320px); margin: auto; display: flex; flex-direction: column; align-items: center; padding: clamp(145px, 10vw, 160px) 0 clamp(80px, 8vw, 110px); }
.hero-copy { position: relative; z-index: 2; max-width: 940px; text-align: center; animation: rise-in .9s cubic-bezier(.2,.75,.2,1) both; }
.eyebrow { display: flex; align-items: center; gap: 12px; color: var(--sky); font-size: 11px; font-weight: 800; letter-spacing: .2em; line-height: 1.5; }
.eyebrow-line { width: 26px; height: 2px; background: var(--mint); display: inline-block; }
.hero-eyebrow { justify-content: center; }
.hero-copy h1 { margin-top: 25px; font-size: clamp(72px, 7.5vw, 105px); line-height: .95; letter-spacing: -.075em; font-weight: 800; }
[data-lang="vi"] .landing .hero-copy h1 { font-size: clamp(60px, 6vw, 90px); }
.hero-copy h1 em { color: #b7dcf2; font-style: normal; }
.hero-description { color: #bfd0df; max-width: 710px; margin: 26px auto 0 !important; font-size: clamp(17px, 1.35vw, 20px); line-height: 1.6; }
.hero-actions { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 26px; margin-top: 30px; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 26px; min-height: 54px; padding: 0 24px; border-radius: 7px; font-size: 15px; font-weight: 750; transition: transform .25s ease, box-shadow .25s ease, background .25s ease; }
.button:hover { transform: translateY(-3px); }
.button-primary { background: #d8ecf8; color: #14233a; box-shadow: 0 12px 36px rgba(13,20,34,.18); }
.button-primary:hover { background: #fff; box-shadow: 0 16px 42px rgba(13,20,34,.24); }
.text-link { display: inline-flex; align-items: center; gap: 10px; color: #e5f2fa; font-size: 14px; font-weight: 650; }
.text-link:hover { color: white; }
.hero-availability { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 22px; color: #a8c0d1; font-size: 12px; }
.availability-pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 5px rgba(167,228,215,.1); animation: pulse 3s ease-in-out infinite; }
.hero-art { position: relative; width: min(100%, 1140px); margin-top: clamp(40px, 4vw, 55px); animation: art-in 1.25s .15s cubic-bezier(.17,.78,.24,1) both; }
.art-glow { position: absolute; width: 82%; height: 65%; border-radius: 50%; left: 9%; top: 28%; background: #6eaacc; opacity: .28; filter: blur(90px); }
.screen-frame { overflow: hidden; background: #f7f9fb; border: 1px solid rgba(154,187,211,.45); box-shadow: 0 32px 90px rgba(8,16,29,.24); }
.hero-screen { position: relative; z-index: 1; padding: 7px; border-radius: 16px; border-color: rgba(216,237,249,.62); background: rgba(229,243,251,.78); box-shadow: 0 35px 100px rgba(3,14,27,.38), 0 0 0 1px rgba(255,255,255,.13); }
.hero-screen img { width: 100%; height: auto; aspect-ratio: 1600 / 860; border-radius: 9px; }

.value-strip { width: min(100% - 64px, 1320px); margin: auto; display: grid; grid-template-columns: repeat(3, 1fr); border-bottom: 1px solid #d6e0e9; }
.value-strip > div { display: flex; align-items: center; gap: 20px; padding: 32px 3vw; }
.value-strip > div + div { border-left: 1px solid #d6e0e9; }
.value-index { color: #7794ad; font-size: 12px; letter-spacing: .12em; }
.value-strip strong { color: #263b53; font-size: 14px; font-weight: 700; }

.live-demo-section { padding: clamp(82px, 9vw, 140px) 0 clamp(80px, 9vw, 138px); background: #eaf2f7; }
.live-demo-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 35px; }
.live-demo-heading h2 { margin-top: 18px; font-size: clamp(44px, 5vw, 76px); line-height: 1.04; letter-spacing: -.055em; }
.live-demo-description { max-width: 700px; margin-top: 19px !important; color: #627d91; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6; }
.demo-expand { flex: none; display: flex; align-items: center; gap: 28px; padding: 13px 17px; border: 1px solid #bed4e2; border-radius: 7px; color: #315e7b; font-size: 13px; font-weight: 750; }
.demo-expand:hover { background: #dcebf3; }
.live-demo-frame { width: min(100% - 64px, 1460px); height: clamp(620px, 73vw, 850px); margin: 0 auto; overflow: hidden; border: 1px solid #b9ccda; border-radius: 14px; background: white; box-shadow: 0 35px 80px rgba(20,45,68,.17), 0 4px 16px rgba(20,45,68,.1); }
.demo-frame-bar { height: 38px; display: flex; align-items: center; gap: 13px; padding: 0 16px; border-bottom: 1px solid #dbe5ec; background: #f8fbfd; color: #628199; font-size: 10px; }
.demo-frame-bar strong { font-weight: 700; }
.demo-frame-dots { display: flex; gap: 5px; }
.demo-frame-dots i { width: 6px; height: 6px; border-radius: 50%; background: #b3c7d4; }
.demo-frame-dots i:first-child { background: #91cdbf; }
.demo-frame-status { margin-left: auto; color: #9db0be; font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.live-demo-frame iframe { display: block; width: 100%; height: calc(100% - 38px); border: 0; background: #fff; }
.live-demo-footnote { margin: 17px 0 0 !important; color: #819aaa; text-align: center; font-size: 12px; }

.intro-section { padding-top: clamp(100px, 11vw, 170px); padding-bottom: clamp(100px, 11vw, 170px); }
.section-lead { max-width: 840px; margin-bottom: 72px; }
.dark-eyebrow { color: #4a789b; }
.section-lead h2,.dark-feature-heading h2,.assistant-copy h2,.capabilities-heading h2,.platform-copy h2,.download-inner h2 { font-size: clamp(42px, 5vw, 78px); line-height: 1.05; letter-spacing: -.055em; font-weight: 760; margin-top: 20px; }
.section-lead > p:last-child,.dark-feature-heading > p:last-child,.assistant-copy > p:nth-of-type(2),.platform-copy > p:nth-of-type(2),.download-inner > div:first-child > p:last-child { color: #61758a; font-size: clamp(16px, 1.45vw, 20px); line-height: 1.65; margin-top: 24px; max-width: 710px; }
.feature-showcase { display: grid; grid-template-columns: 1.35fr .65fr; align-items: center; gap: clamp(44px, 6vw, 100px); }
.showcase-image { border-radius: 14px; align-self: center; }
.showcase-image img { width: 100%; height: auto; aspect-ratio: 1600 / 860; object-fit: contain; }
.showcase-copy { padding: 30px 0; }
.feature-number,.story-kicker { color: #5f88a9; font-size: 12px; font-weight: 800; letter-spacing: .17em; }
.showcase-copy h3 { margin-top: 20px; font-size: clamp(32px, 3.2vw, 48px); line-height: 1.1; letter-spacing: -.04em; }
.showcase-copy p { margin-top: 20px; color: #61758a; line-height: 1.7; font-size: 17px; }
.micro-list { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 30px; }
.micro-list > span { border: 1px solid #cbdbe7; border-radius: 999px; padding: 7px 12px; color: #315773; font-size: 12px; font-weight: 700; }

.dark-feature { background: #111f33; color: white; position: relative; overflow: hidden; }
.dark-feature::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 73% 10%, rgba(81,130,169,.19), transparent 45%); }
.dark-feature-inner { position: relative; padding-top: clamp(95px, 9vw, 150px); padding-bottom: clamp(100px, 10vw, 150px); }
.dark-feature-heading { max-width: 860px; margin-bottom: 60px; }
.dark-feature-heading > p:last-child { color: #aabfd2; }
.story-grid { display: grid; grid-template-columns: 1.45fr .7fr; gap: 22px; }
.story-card { min-height: 550px; overflow: hidden; border: 1px solid rgba(183,216,239,.17); border-radius: 17px; background: #1b304b; display: flex; flex-direction: column; }
.story-card-large .story-image { width: 100%; aspect-ratio: 1600 / 860; overflow: hidden; background: #e9f3f9; }
.story-image img { display: block; width: 100%; height: auto; aspect-ratio: 1600 / 860; object-fit: contain; }
.story-content { padding: 34px 38px 40px; margin-top: auto; }
.story-content h3 { font-size: clamp(26px, 2.5vw, 38px); letter-spacing: -.035em; line-height: 1.1; margin-top: 11px; }
.story-content p { color: #aebfd0; line-height: 1.65; margin-top: 16px; font-size: 15px; }
.story-kicker { color: #98c9e6; }
.story-card-side { background: linear-gradient(155deg, #294968, #1b304b 70%); }
.tag-visual { flex: 1; min-height: 250px; display: flex; align-content: center; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 48px 24px; transform: rotate(-8deg); }
.tag-visual span { background: #d9ecf6; color: #244b68; border-radius: 999px; padding: 12px 18px; font-size: 14px; font-weight: 750; box-shadow: 0 12px 30px rgba(9,17,28,.18); }
.tag-visual span:nth-child(2) { background: #b7d9e9; transform: translateY(-20px); }
.tag-visual span:nth-child(3) { background: #d8f1e8; transform: translateY(16px); }
.tag-visual span:nth-child(4) { background: #a6c8e0; }
.tag-visual span:nth-child(5) { background: #edf5fa; transform: translateY(-8px); }

.assistant-section { padding-top: clamp(110px, 11vw, 175px); padding-bottom: clamp(110px, 11vw, 175px); display: grid; grid-template-columns: .76fr 1.24fr; gap: clamp(48px, 6vw, 100px); align-items: center; }
.assistant-copy h2 { font-size: clamp(42px, 4.2vw, 68px); }
.assistant-copy > p:nth-of-type(2) { font-size: 17px; }
.assistant-points { margin-top: 35px; border-top: 1px solid #d6e0e9; }
.assistant-points div { display: flex; align-items: center; gap: 22px; padding: 15px 0; border-bottom: 1px solid #d6e0e9; font-size: 15px; font-weight: 650; }
.assistant-points b { color: #5b83a6; font-size: 12px; }
.assistant-visual { border-radius: 17px; transform: rotate(2deg); transition: transform .65s ease; }
.assistant-visual:hover { transform: rotate(0); }
.assistant-visual img { width: 100%; height: auto; }

.capabilities-section { padding-bottom: clamp(110px, 10vw, 170px); }
.capabilities-heading { max-width: 770px; margin-bottom: 54px; }
.capability-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 35px; border-top: 1px solid #ccd9e4; }
.capability { position: relative; min-height: 235px; padding: 30px 8px 28px 0; border-bottom: 1px solid #ccd9e4; }
.capability-mark { color: #48799d; font-size: 29px; font-weight: 400; line-height: 1; }
.capability h3 { font-size: 20px; letter-spacing: -.02em; margin-top: 23px; }
.capability p { color: #667a8e; margin-top: 10px; line-height: 1.6; max-width: 320px; font-size: 15px; }

.platform-section { background: #dceaf3; overflow: hidden; }
.platform-inner { min-height: 710px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 60px; }
.platform-copy { max-width: 600px; padding: 100px 0; }
.platform-copy .eyebrow { color: #497394; }
.platform-pills { display: flex; gap: 10px; margin-top: 30px; }
.platform-pills span { border: 1px solid #9bbbd1; padding: 8px 15px; border-radius: 999px; color: #315d7d; font-size: 13px; font-weight: 750; }
.phone-stage { position: relative; display: flex; justify-content: center; align-items: flex-end; height: 710px; }
.phone-glow { position: absolute; width: 500px; height: 500px; border-radius: 50%; background: #94b9d4; filter: blur(90px); bottom: -170px; }
.phone-frame { position: relative; width: min(320px, 60%); aspect-ratio: 807 / 1800; overflow: hidden; border: 11px solid #172840; border-bottom: 0; border-radius: 43px 43px 0 0; box-shadow: 30px 30px 70px rgba(29,64,92,.24); background: white; transform: rotate(7deg) translateY(36px); transition: transform .75s ease; }
.phone-frame:hover { transform: rotate(1deg) translateY(15px); }
.phone-frame::before { content: ""; position: absolute; top: 11px; left: 50%; width: 24%; height: 13px; transform: translateX(-50%); border-radius: 999px; background: #172840; z-index: 2; }
.phone-frame img { display: block; width: 100%; height: auto; aspect-ratio: 807 / 1800; object-fit: contain; }

.download-section { background: #182c48; color: white; position: relative; overflow: hidden; }
.download-section::before { content: ""; position: absolute; width: 55vw; aspect-ratio: 1; right: -15vw; top: -30vw; border-radius: 50%; border: 1px solid rgba(183,216,239,.18); box-shadow: 0 0 0 12vw rgba(183,216,239,.035), 0 0 0 24vw rgba(183,216,239,.025); }
.download-inner { position: relative; padding-top: 110px; padding-bottom: 115px; display: flex; align-items: flex-end; justify-content: space-between; gap: 60px; }
.download-inner h2 { max-width: 720px; }
.download-inner > div:first-child > p:last-child { color: #b4c8d9; }
.download-links { display: flex; flex-direction: column; gap: 12px; min-width: 215px; }
.store-button { justify-content: flex-start; gap: 13px; min-width: 240px; }
.store-mark { width: 24px; height: 24px; flex: none; }
.store-arrow { margin-left: auto; }
.button-light { background: #e3f1fa; color: #152a43; }
.button-light:hover { background: #fff; }
.button-outline { border: 1px solid rgba(215,234,250,.5); color: white; }
.button-outline:hover { background: rgba(255,255,255,.1); }
.landing-footer { background: #0d1b2d; color: #a7bbcd; }
.footer-main { display: grid; grid-template-columns: minmax(280px, 1.5fr) repeat(2, minmax(150px, .55fr)); gap: clamp(40px, 7vw, 120px); padding-top: 84px; padding-bottom: 74px; }
.footer-brand { display: inline-flex; align-items: center; gap: 12px; color: white; font-size: 15px; font-weight: 850; letter-spacing: .13em; }
.footer-brand img { width: 48px; height: 48px; }
.footer-about p { max-width: 360px; margin-top: 22px; color: #9eb5c7; font-size: 15px; line-height: 1.65; }
.footer-column { display: flex; flex-direction: column; align-items: start; gap: 12px; }
.footer-column strong { margin: 7px 0 9px; color: #e2eff8; font-size: 12px; font-weight: 800; letter-spacing: .07em; }
.footer-column a,.footer-bottom a { color: #a8bfd0; font-size: 13px; }
.footer-column a:hover,.footer-bottom a:hover { color: #fff; }
.footer-bottom { min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid #34465b; color: #819bad; }
.footer-bottom > div { display: flex; align-items: center; gap: 24px; }
.footer-bottom small { font-size: 12px; }
.footer-bottom .back-to-top { color: #c7dce8; font-weight: 700; }

.has-motion .reveal { opacity: 0; transform: translateY(34px); transition: opacity .85s ease, transform .85s cubic-bezier(.2,.75,.2,1); }
.has-motion .reveal.is-visible { opacity: 1; transform: translateY(0); }
@keyframes rise-in { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes art-in { from { opacity: 0; transform: translateY(30px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 5px rgba(167,228,215,.1); } 50% { box-shadow: 0 0 0 10px rgba(167,228,215,0); } }

@media (max-width: 1100px) {
  .story-grid { grid-template-columns: 1.2fr .8fr; }
  .assistant-section { grid-template-columns: 1fr; }
  .assistant-copy { max-width: 800px; }
  .assistant-visual { transform: none; }
}
@media (max-width: 760px) {
  .landing .section-wrap,.value-strip { width: min(100% - 36px, 1320px); }
  .header-inner,.hero-inner { width: min(100% - 36px, 1420px); }
  .site-header { height: 74px; }
  .site-brand { font-size: 12px; }
  .site-brand img { width: 38px; height: 38px; }
  .menu-toggle { display: flex; }
  .site-nav { display: none; position: absolute; top: 70px; left: 18px; right: 18px; flex-direction: column; align-items: stretch; gap: 0; padding: 16px; border: 1px solid rgba(221,237,248,.2); border-radius: 16px; background: #1c304b; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
  .site-nav.is-open { display: flex; }
  .site-nav a { padding: 13px 10px; }
  .site-nav .nav-download { margin-top: 8px; justify-content: space-between; }
  .hero-inner { padding-top: 140px; padding-bottom: 80px; }
  .hero-copy h1 { font-size: clamp(60px, 11vw, 85px); }
  .hero-art { margin-top: 44px; }
  .value-strip { grid-template-columns: 1fr; padding: 18px 0; }
  .value-strip > div { padding: 12px 4px; }
  .value-strip > div + div { border-left: 0; }
  .feature-showcase,.story-grid,.platform-inner { grid-template-columns: 1fr; }
  .section-lead { margin-bottom: 44px; }
  .showcase-copy { padding: 0; }
  .story-card { min-height: 0; }
  .live-demo-frame { width: min(100% - 36px, 1460px); height: 680px; }
  .story-card-side { min-height: 390px; }
  .capability-grid { grid-template-columns: repeat(2, 1fr); gap: 0 25px; }
  .platform-inner { gap: 0; }
  .platform-copy { padding: 95px 0 30px; }
  .phone-stage { height: auto; min-height: 650px; align-items: flex-start; padding-top: 60px; }
  .phone-frame { width: min(260px, 70%); transform: rotate(4deg); }
  .download-inner { display: block; padding-top: 95px; padding-bottom: 100px; }
  .download-links { margin-top: 35px; flex-direction: row; flex-wrap: wrap; }
  .footer-main { grid-template-columns: 1.5fr 1fr; gap: 44px; }
  .footer-about { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .hero-copy h1 { font-size: clamp(54px, 13vw, 68px); }
  [data-lang="vi"] .landing .hero-copy h1 { font-size: clamp(44px, 10.5vw, 55px); }
  .hero-actions { gap: 18px; }
  .hero-screen { padding: 4px; border-radius: 9px; }
  .hero-screen img { border-radius: 5px; }
  .section-lead h2,.dark-feature-heading h2,.assistant-copy h2,.capabilities-heading h2,.platform-copy h2,.download-inner h2 { font-size: clamp(39px, 10vw, 57px); }
  .live-demo-section { padding-top: 80px; padding-bottom: 80px; }
  .live-demo-heading { align-items: start; flex-direction: column; gap: 22px; }
  .live-demo-frame { width: 100%; height: 680px; border-left: 0; border-right: 0; border-radius: 0; }
  .demo-frame-bar { padding: 0 14px; }
  .story-content { padding: 27px; }
  .capability-grid { grid-template-columns: 1fr; }
  .capability { min-height: 0; padding-bottom: 28px; }
  .download-links { flex-direction: column; }
  .download-links .button { width: 100%; justify-content: space-between; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 38px 18px; padding-top: 65px; padding-bottom: 60px; }
  .footer-about { grid-column: 1 / -1; }
  .footer-bottom { flex-wrap: wrap; justify-content: start; gap: 12px 24px; padding-top: 24px; padding-bottom: 30px; }
  .footer-bottom .back-to-top { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }
  .landing *, .landing *::before, .landing *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .has-motion .reveal { opacity: 1; transform: none; }
}