@import url('/docs/brand/kit/brand-tokens.css');
@import url('/docs/brand/kit/brand-motion.css');

:root{--surface:#fff;--line:var(--console-border);--muted:var(--console-ink-muted);--dark:var(--tom-darkCanvas);--dark-line:var(--console-border-dark);--content:1200px;--console-canvas:#F6F8F7;--console-subtle:#EFF3F1;--console-border:#DFE3E8;--console-divider:#ECEEF1;--console-ink-secondary:#4F5968;--console-ink-muted:#636D80;--console-accent:var(--tom-primary);--console-accent-hover:#076F3E;--console-accent-soft:#EAF7F0;--console-surface-dark:#181C19;--console-border-dark:#303631;--console-ink-2-dark:#C4CCC6;--console-ink-3-dark:#9BA59E;--console-radius-control:6px;--console-radius-panel:8px;--console-focus-width:3px;--console-focus-offset:2px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,sans-serif;color:var(--tom-ink);background:var(--tom-canvas);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}img{display:block;max-width:100%}h1,h2,h3,p{margin-top:0}h1,h2,h3{letter-spacing:-.04em}p{line-height:1.65}a:focus-visible,button:focus-visible,summary:focus-visible{outline:var(--console-focus-width) solid var(--tom-primary);outline-offset:var(--console-focus-offset)}.dark :focus-visible,.site-header :focus-visible,.to-top:focus-visible,.mobile-nav :focus-visible,.footer :focus-visible{outline-color:var(--tom-uiDarkAccent)}.wrap{width:min(var(--content),calc(100% - 80px));margin-inline:auto}.dark{background:var(--dark);color:#fff}.section-pad{padding:132px 0}.eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--tom-primary);display:flex;align-items:center;gap:12px}.eyebrow.light{color:var(--tom-uiDarkAccent)}.eyebrow-dot{width:7px;height:7px;background:var(--tom-uiDarkAccent);border-radius:50%}
.site-header{position:absolute;z-index:10;top:0;left:0;right:0;color:#fff}.nav-inner{height:98px;display:flex;align-items:center;justify-content:space-between;gap:30px;border-bottom:1px solid #ffffff20}.brand img{width:154px}.desktop-nav{display:flex;gap:32px;margin-left:auto}.desktop-nav a{font-size:13px;color:var(--console-ink-2-dark);transition:color var(--tom-motion-quick)}.desktop-nav a:hover,.desktop-nav a:focus-visible{color:white}.nav-cta{font-size:12px;font-weight:700;border:1px solid var(--console-border-dark);border-radius:30px;padding:15px 19px;white-space:nowrap;transition:background var(--tom-motion-fast)}.nav-cta:hover{background:#ffffff20}.nav-cta span{margin-left:15px}.menu-toggle,.mobile-nav{display:none}
.hero{min-height:790px;height:min(900px,100svh);position:relative;overflow:hidden;display:flex;align-items:center;isolation:isolate}.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 72% 47%,#13473470,transparent 43%),radial-gradient(ellipse at 21% 54%,#1c302436,transparent 38%);z-index:-2}.hero-glow{position:absolute;width:450px;height:450px;background:#13945233;filter:blur(120px);right:0;top:10%;z-index:-1}.hero-content{position:relative;z-index:1;padding-top:95px}.hero h1{font-size:clamp(62px,5.6vw,84px);line-height:1.04;margin:30px 0 26px;max-width:850px;font-weight:600}.hero h1 span,.approach h2 span,.contact h2 span{color:var(--tom-uiDarkAccent)}.hero-intro{max-width:470px;font-size:17px;color:var(--console-ink-3-dark);line-height:1.8;margin-bottom:38px}.pill-button{display:inline-flex;align-items:center;justify-content:space-between;gap:50px;padding:18px 24px;background:var(--tom-primary);color:#fff;border-radius:40px;font-size:14px;font-weight:700;min-height:56px;transition:background var(--tom-motion-fast),transform var(--tom-motion-fast) var(--tom-motion-ease-surface)}.pill-button:hover{background:var(--console-accent-hover);transform:translateY(-4px)}.hero-bottom{position:absolute;top:calc(100% + 112px);left:0;display:flex;gap:22px;align-items:center;font-size:12px;font-weight:700;letter-spacing:.1em;color:var(--console-ink-3-dark)}.hero-bottom a{width:36px;height:36px;border:1px solid var(--console-border-dark);border-radius:50%;display:grid;place-items:center;font-size:19px}.hero-art{position:absolute;width:680px;height:680px;right:-120px;top:13%;pointer-events:none;}.core-label{text-align:center;font-size:12px;line-height:1.8;letter-spacing:.3em;font-weight:600;color:var(--console-ink-2-dark)}
.problem{background:var(--console-canvas)}.problem-grid{display:grid;grid-template-columns:1fr 1fr;gap:130px}.problem h2,.section-head h2,.faq h2{font-size:clamp(40px,4.4vw,65px);line-height:1.13;font-weight:600;margin:0}.problem h2 em{font-style:normal;color:var(--tom-primary)}.problem-right{padding-top:35px}.problem-right>p{font-size:18px;color:var(--console-ink-secondary);margin-bottom:40px}.problem-list{border-top:1px solid var(--line)}.problem-list div{display:flex;gap:34px;align-items:center;padding:23px 0;border-bottom:1px solid var(--line)}.problem-list span{color:var(--tom-primary);font-size:12px;font-weight:700}.problem-list strong{font-size:15px;font-weight:600}
.solutions{background:#fff}.section-head{display:flex;align-items:end;justify-content:space-between;gap:70px;margin-bottom:55px}.section-head h2{margin-bottom:0}.section-head>p{max-width:350px;color:var(--muted);margin:0 0 8px}.solution-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:16px}.solution-card{min-height:488px;background:var(--console-subtle);border:1px solid var(--console-border);border-radius:16px;padding:24px;display:flex;flex-direction:column;overflow:hidden}.solution-card.featured{background:var(--console-accent-soft)}.card-top{display:flex;justify-content:space-between;font-size:12px;letter-spacing:.09em;color:var(--console-ink-secondary);font-weight:700}.solution-card h3{font-size:24px;font-weight:600;margin:0 0 10px}.solution-card p{font-size:14px;color:var(--console-ink-secondary);margin:0;max-width:340px}.platform-visual{flex:1;display:flex;align-items:center;justify-content:center;min-height:280px;perspective:600px}.platform-window{width:88%;height:205px;background:#fff;border-radius:10px;box-shadow:0 25px 50px #25573a2c;transform:rotate(-8deg) rotateX(8deg);overflow:hidden;border:1px solid var(--console-border)}.window-top{height:27px;border-bottom:1px solid var(--console-border);display:flex;align-items:center;gap:4px;padding:0 10px}.window-top i{width:5px;height:5px;border-radius:50%;background:#b8c9bd}.window-top span{font-size:7px;letter-spacing:.1em;margin-left:12px;color:#789182}.window-body{display:flex;height:calc(100% - 27px)}.window-side{width:21%;background:var(--console-subtle);border-right:1px solid var(--console-border);padding:19px 10px}.window-side b{display:block;height:5px;border-radius:5px;background:#d6e1d8;margin-bottom:16px}.window-side b:first-child{background:var(--tom-primary)}.window-main{flex:1;padding:22px}.window-lines b{display:block;height:7px;width:50%;border-radius:3px;background:#d6e2d8;margin-bottom:8px}.window-lines b:last-child{width:32%;height:5px;background:var(--console-border)}.window-chart{height:80px;display:flex;align-items:end;gap:7px;border-bottom:1px solid var(--console-border)}.window-chart span{flex:1;background:#b9dfc5;border-radius:3px 3px 0 0;height:40%}.window-chart span:nth-child(2){height:57%}.window-chart span:nth-child(3){height:48%}.window-chart span:nth-child(4){height:71%}.window-chart span:nth-child(5){height:62%}.window-chart span:nth-child(6){height:84%}.window-chart span:nth-child(7){height:95%;background:var(--tom-primary)}.window-panels{display:flex;gap:7px;margin-top:9px}.window-panels i{height:15px;flex:1;background:var(--console-subtle);border-radius:3px}.mini-visual{height:280px;position:relative;flex:1}.nodes{background:radial-gradient(circle at center,#d6ebdc,transparent 55%)}.nodes:before,.nodes:after{content:"";position:absolute;left:18%;right:18%;top:50%;border-top:1px dashed #76a885;transform:rotate(27deg)}.nodes:after{transform:rotate(-27deg)}.node{position:absolute;width:46px;height:46px;border-radius:13px;background:#fff;border:1px solid #bdd8c4;box-shadow:0 10px 22px #2775481c;z-index:1}.n1{top:27%;left:15%}.n2{top:23%;right:12%}.n3{bottom:22%;left:16%}.n4{bottom:23%;right:12%}.center-node{left:calc(50% - 31px);top:calc(50% - 31px);width:62px;height:62px;background:var(--tom-primary);color:white;display:grid;place-items:center;font-size:26px}.ai-visual{display:flex;flex-direction:column;justify-content:center;gap:13px;padding:0 8px}.ai-line{display:flex;gap:8px}.ai-line span{height:11px;width:36%;background:#d6e7d9;border-radius:8px}.ai-line span:nth-child(2){width:22%}.ai-line span:nth-child(3){width:16%}.ai-line.short span{width:22%}.ai-message{background:white;box-shadow:0 14px 35px #266a3e22;padding:24px 15px;border:1px solid var(--console-border);border-radius:12px;color:#2c5b3e;font-size:12px;font-weight:700}.cursor{display:inline-block;width:2px;height:12px;background:var(--tom-primary);margin-left:4px;vertical-align:middle}
.approach{background:var(--console-surface-dark)}.approach-heading{display:flex;align-items:end;justify-content:space-between;gap:50px;margin:0 0 70px}.approach h2,.contact h2{font-size:clamp(44px,5.5vw,78px);font-weight:600;line-height:1.11;margin:0}.approach-heading p{max-width:320px;color:var(--console-ink-2-dark);margin:0}.steps{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--console-border-dark)}.steps article{padding:33px 40px 0 0;min-height:230px}.steps article+article{padding-left:40px;border-left:1px solid var(--console-border-dark)}.steps span{color:var(--tom-uiDarkAccent);font-size:12px;letter-spacing:.12em;font-weight:700}.steps h3{font-size:25px;font-weight:600;margin:43px 0 10px}.steps p{font-size:14px;color:var(--console-ink-3-dark);margin:0}
.products{background:#fff}.product-row{display:grid;grid-template-columns:90px 1fr 35px;align-items:center;gap:30px;padding:34px 0;border-top:1px solid var(--line)}.product-row:last-child{border-bottom:1px solid var(--line)}.product-mark{height:74px;width:74px;border-radius:15px;background:var(--console-accent-soft);display:grid;place-items:center}.product-mark img{width:46px;height:46px}.product-text span{font-size:10px;font-weight:700;letter-spacing:.12em;color:var(--tom-primary)}.product-text h3{font-size:25px;margin:5px 0 5px;font-weight:700;letter-spacing:-.035em}.product-text p{font-size:14px;margin:0;color:var(--muted)}.product-arrow{font-size:25px;color:var(--tom-primary)}
.faq{background:var(--console-canvas)}.faq-layout{display:grid;grid-template-columns:1fr 1.2fr;gap:100px}.faq h2{margin-bottom:25px}.faq-layout>div:first-child>p{max-width:350px;color:var(--muted)}.text-link{display:inline-block;color:var(--tom-primary);font-size:14px;font-weight:700;border-bottom:1px solid var(--tom-primary);padding-bottom:5px}.faq-items{border-top:1px solid var(--console-border)}.faq-items details{border-bottom:1px solid var(--console-border)}.faq-items summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:23px 0;font-weight:600;font-size:16px}.faq-items summary::-webkit-details-marker{display:none}.faq-items summary span{color:var(--tom-primary);font-size:26px;font-weight:400;transition:transform var(--tom-motion-fast)}.faq-items details[open] summary span{transform:rotate(45deg)}.faq-items details p{font-size:14px;color:var(--muted);margin:0 35px 25px 0}
.contact{padding:125px 0;background:var(--tom-darkCanvas);overflow:hidden}.contact-layout{display:grid;grid-template-columns:1.3fr .7fr;align-items:center;gap:80px}.contact h2{margin:0 0 27px}.contact p{color:var(--console-ink-2-dark);max-width:480px;margin-bottom:34px}.contact-card{height:330px;position:relative;border:1px solid var(--console-border-dark);border-radius:16px;background:radial-gradient(circle at 50% 50%,#1b5834,#112a1d 58%,#10251a);display:flex;align-items:center;justify-content:center;overflow:hidden}.contact-card>span{position:absolute;top:23px;left:24px;font-size:12px;letter-spacing:.15em;color:var(--console-ink-3-dark)}.contact-card img{width:135px;position:relative;z-index:1}.contact-lines{position:absolute;inset:0;display:grid;place-items:center}.contact-lines i{position:absolute;width:220px;height:220px;border:1px solid #ffffff1c;border-radius:50%}.contact-lines i:nth-child(2){width:310px;height:310px}.contact-lines i:nth-child(3){width:400px;height:400px}.contact-lines i:nth-child(4){width:500px;height:500px}.footer{background:var(--tom-darkCanvas)}.footer-top{display:flex;align-items:center;gap:35px;padding:55px 0;border-bottom:1px solid var(--console-border-dark)}.footer-top img{width:150px}.footer-top p{font-size:13px;color:var(--console-ink-3-dark);margin:0}.footer-top a{font-size:12px;margin-left:auto;color:var(--console-ink-2-dark)}.footer-bottom{display:flex;justify-content:space-between;padding:26px 0;color:var(--console-ink-3-dark);font-size:12px}
@media(max-width:1050px){.desktop-nav{gap:18px}.hero-art{right:-290px;opacity:.75}.solution-grid{grid-template-columns:repeat(2,1fr)}.solution-card.featured{grid-row:span 2}.problem-grid,.faq-layout{gap:55px}}
@media(max-width:720px){.wrap{width:min(100% - 40px,var(--content))}.section-pad{padding:85px 0}.nav-inner{height:76px}.brand img{width:135px}.desktop-nav,.nav-cta{display:none}.menu-toggle{display:flex;width:44px;height:44px;background:none;border:1px solid var(--console-border-dark);border-radius:50%;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:white}.mobile-nav:not([hidden]){display:flex;flex-direction:column;gap:0;padding:10px 20px 22px;background:var(--console-surface-dark);border-bottom:1px solid var(--console-border-dark)}.mobile-nav a{padding:14px 0;border-bottom:1px solid #ffffff22;font-size:15px}.hero{height:auto;min-height:780px;align-items:flex-start}.hero-content{padding-top:188px}.hero h1{font-size:clamp(48px,11vw,72px);margin-top:24px}.hero-intro{font-size:15px;max-width:420px}.hero-art{width:440px;height:440px;top:405px;right:-160px;opacity:.6}.hero-bottom{position:absolute;top:auto;bottom:-165px;left:0;font-size:9px}.problem-grid,.faq-layout,.contact-layout{grid-template-columns:1fr;gap:35px}.problem-right{padding-top:0}.problem h2,.section-head h2,.faq h2{font-size:42px}.section-head,.approach-heading{display:block;margin-bottom:36px}.section-head>p,.approach-heading p{margin-top:22px}.solution-grid{grid-template-columns:1fr}.solution-card.featured{grid-row:auto}.solution-card{min-height:400px}.platform-visual,.mini-visual{min-height:220px;height:220px}.approach h2,.contact h2{font-size:47px}.steps{grid-template-columns:1fr}.steps article,.steps article+article{border-left:0;border-bottom:1px solid var(--console-border-dark);padding:26px 0;min-height:0}.steps h3{margin:23px 0 8px}.product-row{grid-template-columns:60px 1fr 20px;gap:15px;padding:25px 0}.product-mark{width:56px;height:56px;border-radius:11px}.product-mark img{width:34px;height:34px}.product-text h3{font-size:20px}.product-text p{font-size:12px}.contact{padding:85px 0}.contact-card{height:240px}.footer-top{flex-wrap:wrap;gap:15px}.footer-top a{width:100%;margin:8px 0 0}.footer-bottom{gap:15px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:0ms!important;transition-duration:0ms!important}}

/* Bima-inspired page rhythm: full-width editorial modules and restrained TOM tokens. */
.hero-quote{position:absolute;left:56%;top:calc(100% + 32px);font-size:14px;line-height:1.7;color:var(--console-ink-2-dark);white-space:nowrap}.hero-quote small{color:var(--console-ink-3-dark);font-size:12px}.ticker{height:92px;background:var(--console-surface-dark);color:var(--console-ink-2-dark);overflow:hidden;display:flex;align-items:center;border-top:1px solid var(--console-border-dark);border-bottom:1px solid var(--console-border-dark)}.ticker-track{white-space:nowrap;font-size:15px;font-weight:700;letter-spacing:.13em;word-spacing:20px;margin-left:-40px}.ticker-track span{color:var(--tom-coral);margin:0 36px}
.solution-grid{grid-template-columns:repeat(2,1fr)}.solution-card{min-height:420px}.solution-card.featured{grid-row:auto}.flow-visual{display:flex;align-items:center;justify-content:center;gap:8px}.flow-visual span{font-size:12px;letter-spacing:0;color:#13643a;background:#fff;border:1px solid var(--console-border);padding:16px 10px;border-radius:10px;box-shadow:0 10px 20px #0f704022}.flow-visual b{font-size:21px;color:#64a27b}
.work{background:var(--console-subtle)}.work h2,.trust h2,.stack h2{font-size:clamp(46px,5.4vw,76px);font-weight:600;line-height:1.1;margin:0 0 25px}.section-lead{max-width:570px;color:var(--muted);margin-bottom:45px}.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.work-card{background:#fff;border-radius:16px;overflow:hidden;border:1px solid var(--console-border)}.work-graphic{height:260px;background:#dceee2;display:flex;justify-content:center;align-items:center;gap:8px;padding:16px}.work-graphic span{background:#fff;color:#135e37;padding:13px 9px;border-radius:9px;font-size:12px;font-weight:700;box-shadow:0 8px 20px #295f3722}.work-graphic i{display:block;width:19px;border-top:1px dashed #4c9867}.work-card-two .work-graphic{background:#123d28}.work-graphic-chat span:nth-child(2){background:var(--tom-primary);color:white;transform:translateY(-25px)}.work-card-three .work-graphic{background:var(--console-subtle)}.work-graphic-ui span{height:115px;width:30%;display:flex;align-items:end;border-top:5px solid var(--tom-primary);box-shadow:0 14px 25px #2859322c}.work-copy{padding:24px}.work-copy>span,.work-copy small{font-size:12px;color:var(--tom-primary);letter-spacing:.07em;font-weight:700}.work-copy h3{font-size:23px;line-height:1.2;margin:16px 0 12px}.work-copy p{font-size:13px;color:var(--muted);min-height:85px;margin:0 0 15px}.wide-link{display:flex;justify-content:space-between;align-items:center;border:1px solid var(--console-border);border-radius:30px;margin-top:28px;padding:17px 23px;color:var(--tom-primary);font-weight:700;font-size:14px;transition:background var(--tom-motion-fast)}.wide-link:hover{background:var(--console-accent-soft)}
.trust{background:var(--console-surface-dark)}.trust h2{margin:0 0 65px}.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--console-border-dark)}.trust-grid>div{min-height:180px;padding:28px 22px 0 0}.trust-grid>div+div{border-left:1px solid var(--console-border-dark);padding-left:22px}.trust-grid span{font-size:12px;letter-spacing:.08em;color:var(--tom-uiDarkAccent)}.trust-grid h3{font-size:21px;font-weight:500;margin-top:35px;line-height:1.2}
.stack{background:#fff}.stack-layout{display:grid;grid-template-columns:1fr 1fr;gap:70px}.stack-layout p{max-width:350px;color:var(--muted)}.stack-list>div{font-size:24px;letter-spacing:-.04em;font-weight:700;padding:22px 0;border-bottom:1px solid var(--console-border)}.stack-list>div:first-child{border-top:1px solid var(--console-border)}.stack-list span{font-size:12px;letter-spacing:0;color:var(--tom-primary);font-weight:600;margin-right:22px}
.pricing{background:var(--console-accent-soft)}.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.pricing-grid article{background:white;border:1px solid var(--console-border);border-radius:16px;padding:24px;min-height:440px;display:flex;flex-direction:column}.pricing-grid article.pricing-featured{background:var(--tom-primary);color:white}.pricing-grid article>span{font-size:12px;letter-spacing:.09em;color:var(--tom-primary);font-weight:700}.pricing-grid article.pricing-featured>span{color:var(--tom-white)}.pricing-grid h3{font-size:27px;margin:36px 0 10px}.pricing-grid p{font-size:14px;color:var(--muted);min-height:85px}.pricing-grid .pricing-featured p{color:var(--tom-white)}.pricing-grid ul{padding-left:18px;margin:8px 0 30px;font-size:13px;line-height:2}.pricing-grid a{margin-top:auto;border-radius:30px;background:var(--console-accent-soft);color:var(--tom-primary);font-size:13px;font-weight:700;text-align:center;padding:16px}.pricing-grid .pricing-featured a{background:white}
.insights{background:white}.insight-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.insight-grid article{min-height:310px;background:var(--console-subtle);border-radius:16px;padding:24px;display:flex;flex-direction:column}.insight-grid span{font-size:12px;color:var(--tom-primary);font-weight:700;letter-spacing:.09em}.insight-grid h3{font-size:26px;line-height:1.2;margin:auto 0 16px}.insight-grid p{font-size:13px;color:var(--muted);margin:0}
@media(max-width:720px){.hero-quote{display:none}.ticker{height:65px}.ticker-track{font-size:11px}.solution-grid,.work-grid,.pricing-grid,.insight-grid,.stack-layout{grid-template-columns:1fr}.trust-grid{grid-template-columns:repeat(2,1fr)}.trust-grid>div:nth-child(3){border-left:0;padding-left:0}.work-graphic{height:220px}.work-copy p{min-height:0}.stack-layout{gap:30px}.pricing-grid article{min-height:380px}.pricing-grid p{min-height:0}}

/* ===== Motion — dùng token trong brand-motion.css; chỉ animate transform/opacity ===== */
@keyframes rise{from{opacity:0;translate:0 var(--tom-motion-distance-reveal)}to{opacity:1;translate:0 0}}
@keyframes grow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes spin{to{rotate:360deg}}
@keyframes bob{50%{translate:0 -6px}}
@keyframes breathe{50%{opacity:.55;scale:1.08}}
@keyframes blink{50%{opacity:0}}
@keyframes nudge{50%{translate:4px 0;opacity:.6}}

/* Vào trang: hero hiện lần lượt */
.hero-content>*{animation:rise var(--tom-motion-very-slow) var(--tom-motion-ease-surface) both;animation-delay:calc(var(--n,0)*var(--tom-motion-stagger)*2)}
.hero-content>:nth-child(2){--n:1}.hero-content>:nth-child(3){--n:2}.hero-content>:nth-child(4){--n:3}.hero-content>:nth-child(5){--n:5}.hero-content>:nth-child(6){--n:6}

/* Cuộn tới đâu hiện tới đó (main.js gắn data-reveal / is-in) */
.js [data-reveal]{opacity:0}
.js [data-reveal].is-in{animation:rise var(--tom-motion-very-slow) var(--tom-motion-ease-surface) both;animation-delay:calc(var(--i,0)*var(--tom-motion-stagger)*2)}

/* Hình minh họa trong thẻ chạy khi thẻ xuất hiện */
.solution-card.is-in .window-chart span{transform-origin:bottom;animation:grow 700ms var(--tom-motion-ease-surface) both;animation-delay:calc(300ms + var(--tom-motion-stagger)*var(--b,0))}
.window-chart span:nth-child(2){--b:1}.window-chart span:nth-child(3){--b:2}.window-chart span:nth-child(4){--b:3}.window-chart span:nth-child(5){--b:4}.window-chart span:nth-child(6){--b:5}.window-chart span:nth-child(7){--b:6}
.work-card.is-in .work-graphic>span{animation:rise var(--tom-motion-very-slow) var(--tom-motion-ease-surface) both;animation-delay:calc(250ms + var(--tom-motion-stagger)*var(--b,0)*3)}
.work-graphic>span:nth-of-type(2){--b:1}.work-graphic>span:nth-of-type(3){--b:2}

/* Hover */
.solution-card,.work-card,.pricing-grid article,.insight-grid article{transition:transform var(--tom-motion-fast) var(--tom-motion-ease-surface),box-shadow var(--tom-motion-fast),border-color var(--tom-motion-fast)}
.solution-card:hover,.work-card:hover,.pricing-grid article:hover,.insight-grid article:hover{transform:translateY(calc(var(--tom-motion-distance-micro)*-1));box-shadow:0 18px 40px #0f2a1c1f}
.pill-button span,.nav-cta span,.wide-link span,.pricing-grid a{transition:transform var(--tom-motion-fast) var(--tom-motion-ease-surface)}
.pill-button:hover span,.nav-cta:hover span,.wide-link:hover span{transform:translate(3px,-3px)}
.pricing-grid a{display:inline-block}.pricing-grid a:hover{transform:translateX(var(--tom-motion-distance-micro))}
.faq-items details[open]>p{animation:rise var(--tom-motion-fast) var(--tom-motion-ease-surface) both}

/* Hình minh họa: chạy một lần khi thẻ hiện, chạy lại khi hover (không lặp vô hạn) */
@keyframes bob2{50%{translate:0 -6px}}
@keyframes breathe2{50%{opacity:.55;scale:1.08}}
@keyframes blink2{50%{opacity:0}}
@keyframes nudge2{50%{translate:4px 0;opacity:.6}}
.js .ticker-run{display:flex;width:max-content;transform:translateX(calc(var(--tk,0)*-1px))}
.js .ticker-run .ticker-track{flex:none;margin:0;padding-right:0}
.solution-card.is-in .node{animation:bob 900ms var(--tom-motion-ease-surface) 1 both;animation-delay:calc(var(--tom-motion-medium) + var(--tom-motion-stagger)*var(--k,0))}
.solution-card:hover .node{animation:bob2 900ms var(--tom-motion-ease-surface) 1 both;animation-delay:calc(var(--tom-motion-stagger)*var(--k,0))}
.n2{--k:1}.n3{--k:2}.n4{--k:3}
.solution-card.is-in .center-node{animation:breathe 700ms var(--tom-motion-ease-surface) 1 both;animation-delay:var(--tom-motion-medium)}
.solution-card:hover .center-node{animation:breathe2 700ms var(--tom-motion-ease-surface) 1 both}
.solution-card.is-in .cursor{animation:blink 800ms steps(1) 3 both;animation-delay:var(--tom-motion-very-slow)}
.solution-card:hover .cursor{animation:blink2 800ms steps(1) 3 both}
.solution-card.is-in .flow-visual b{animation:nudge 700ms var(--tom-motion-ease-surface) 1 both;animation-delay:calc(var(--tom-motion-medium) + var(--tom-motion-very-slow)*var(--k,0)/2)}
.solution-card:hover .flow-visual b{animation:nudge2 700ms var(--tom-motion-ease-surface) 1 both;animation-delay:calc(var(--tom-motion-very-slow)*var(--k,0)/2)}
.flow-visual b:last-of-type{--k:1}

/* ===== Design system v3 (brand-kit-v3): hero, nút, icon, focus ===== */

/* Hero: symbol master TOMARTEC (inverse) — asset tĩnh, không gradient/glow/xoay */
.hero-art{animation:rise 900ms var(--tom-motion-ease-surface) both;animation-delay:var(--tom-motion-fast)}
/* Như bản gốc: symbol lớn (tối đa 680px), nằm bên phải, tràn nhẹ ra mép; co theo chiều rộng để không đè tiêu đề */
.hero-art{--w:min(680px,52vw);width:var(--w);height:var(--w);right:calc(24px - var(--w)*.1);top:13%;opacity:1}

/* Icon: Lucide 24×24, stroke 2, round, currentColor (16/20/24px) */
.icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none;display:block}
.ico{display:inline-flex;align-items:center;transition:transform var(--tom-motion-fast) var(--tom-motion-ease-surface)}
.menu-toggle .ico-x,.menu-toggle[aria-expanded="true"] .ico-menu{display:none}
.menu-toggle[aria-expanded="true"] .ico-x{display:block}
.ticker-track .ico{vertical-align:middle;margin:0 36px;color:var(--console-ink-3-dark)}
.ticker-track .ico .icon{width:20px;height:20px}
.center-node .icon{width:28px;height:28px}
.flow-visual b.ico{color:var(--console-ink-secondary)}
.flow-visual b .icon{width:20px;height:20px}
.faq-items summary .ico{color:var(--tom-primary)}
.faq-items summary span{font-size:inherit}
.faq-items details[open] summary .ico{transform:rotate(45deg)}

/* Nút (marketing): cao ≥46px, radius 8px, Inter 14/700, gap 8px; primary / secondary */
.pill-button,.nav-cta,.wide-link,.pricing-grid a{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 20px;border-radius:8px;font-size:14px;font-weight:700;line-height:1.2}
.pill-button{background:var(--console-accent);color:var(--tom-white);border:1px solid transparent}
.pill-button:hover{background:var(--console-accent-hover);transform:translateY(-2px)}
.pill-button:active,.nav-cta:active,.wide-link:active,.pricing-grid a:active{transform:scale(.97);transition-duration:100ms}
.nav-cta{min-height:44px;padding:10px 16px;border:1px solid var(--console-ink-3-dark);background:transparent;color:var(--tom-white)}
.nav-cta:hover{background:#ffffff1f}
.nav-cta span,.pill-button span{margin-left:0}
.pill-button:hover .ico,.nav-cta:hover .ico,.wide-link:hover .ico{transform:translate(2px,-2px)}
.wide-link{display:flex;justify-content:space-between;width:100%;background:transparent;border:1px solid var(--console-accent);color:var(--console-accent)}
.wide-link:hover{background:var(--console-accent-soft)}
.pricing-grid a{display:flex;margin-top:auto;background:var(--console-accent-soft);color:var(--console-accent);text-align:center}
.pricing-grid a:hover{background:var(--console-accent);color:var(--tom-white);transform:none}
.pricing-grid .pricing-featured a{background:var(--tom-white);color:var(--console-accent)}
.pricing-grid .pricing-featured a:hover{background:var(--console-accent-soft)}
.text-link,.footer-top a{display:inline-flex;align-items:center;gap:6px;min-height:44px}
.text-link{border-bottom:1px solid var(--tom-primary);padding-bottom:0}
.desktop-nav a{display:inline-flex;align-items:center;min-height:44px}
.menu-toggle{border-radius:8px;border-color:var(--console-ink-3-dark)}
.hero-bottom a{width:44px;height:44px;border-radius:8px;border-color:var(--console-ink-3-dark);color:var(--tom-white)}

/* Thẻ: chỉ đổi viền khi hover (flow panel không đổ bóng) */
.solution-card:hover,.work-card:hover,.pricing-grid article:hover,.insight-grid article:hover{transform:translateY(-2px);box-shadow:none;border-color:var(--console-accent)}

/* Nút về đầu trang + vòng tiến độ đọc (hình học, không dùng logo) */
.to-top{position:fixed;z-index:20;right:20px;bottom:20px;width:48px;height:48px;padding:0;border:0;border-radius:50%;display:grid;place-items:center;background:var(--tom-darkCanvas);color:var(--tom-white);cursor:pointer;opacity:0;visibility:hidden;translate:0 var(--tom-motion-distance-reveal);transition:opacity var(--tom-motion-fast),translate var(--tom-motion-fast) var(--tom-motion-ease-surface),visibility 0s linear var(--tom-motion-fast)}
.to-top.is-visible{opacity:1;visibility:visible;translate:0 0;transition-delay:0s}
.to-top>*{grid-area:1/1}
.to-top .ring{width:100%;height:100%;fill:none;stroke-width:3}
.ring-track{stroke:#ffffff33}
.ring-bar{stroke:var(--tom-uiDarkAccent);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--p,0))}
.to-top:hover .icon{transform:translateY(-2px)}
.to-top .icon{transition:transform var(--tom-motion-fast) var(--tom-motion-ease-surface)}
@media(max-width:720px){.to-top{width:44px;height:44px;right:10px;bottom:calc(10px + env(safe-area-inset-bottom))}.to-top.is-visible{opacity:.92}}

/* Xuống dòng: tiêu đề cân bằng, đoạn văn tránh dòng lẻ; ngắt cứng chỉ ở màn hình rộng */
h1,h2,h3{text-wrap:balance}
p,summary,.hero-quote{text-wrap:pretty}
.hero h1{text-wrap:wrap}
@media(max-width:720px){br.lg{display:none}.trust h2 br{display:none}}

/* Mobile hero: symbol nằm trọn trong màn hình, dưới nút CTA */
@media(max-width:720px){
  .hero{min-height:930px}
  .hero-content{position:static}
  .hero h1{font-size:clamp(28px,calc((100vw - 40px)/8.4),60px)}
  .hero-art{width:230px;height:230px;top:auto;bottom:120px;right:auto;left:calc(50% - 115px);opacity:1}
  .hero-bottom{top:auto;bottom:40px;left:20px;font-size:12px;letter-spacing:.06em;z-index:2}
  .hero-bottom span{max-width:calc(100vw - 110px)}
  .nav-cta{display:none}
}

/* Hero O — NGOẠI LỆ được chủ dự án duyệt so với BRAND_GUIDELINES mục 3 (logo không gradient/glow/xoay/tự chuyển động):
   vẽ ra một lần, xoay theo cuộn, chấm coral nhìn theo con trỏ. Tắt khi giảm chuyển động. */
@keyframes draw-o{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes drop-dot{from{opacity:0;scale:0;translate:-30px 40px}to{opacity:1;scale:1;translate:0 0}}
.o-svg{width:100%;height:100%;display:block;rotate:calc(var(--o-rot,0)*1deg);filter:drop-shadow(0 0 40px #49b46b55)}
.o-draw{stroke-dasharray:1;stroke-dashoffset:0;animation:draw-o 1400ms var(--tom-motion-ease-surface) both;animation-delay:var(--tom-motion-medium)}
.o-dot{transform-box:fill-box;transform-origin:center;transform:translate(calc(var(--dx,0)*1px),calc(var(--dy,0)*1px));transition:transform var(--tom-motion-fast) var(--tom-motion-ease-surface);animation:drop-dot var(--tom-motion-very-slow) var(--tom-motion-ease-surface) both;animation-delay:1500ms}
.core-label{position:absolute;inset:0;display:grid;place-items:center;text-align:center}
@media (prefers-reduced-motion:reduce){.o-draw,.o-dot{animation:none}}
@media(max-width:1050px){.core-label{display:none}}

.insight-grid p{text-wrap:balance}

/* Tablet (721–1050px): bố cục hero theo cột như mobile, symbol nằm dưới nút, không đè chữ */
@media(min-width:721px) and (max-width:1050px){
  .hero{height:auto;min-height:980px;align-items:flex-start}
  .hero-content{position:static;padding-top:188px}
  .hero-art{width:280px;height:280px;top:auto;bottom:100px;left:calc(50% - 140px);right:auto}
  .hero-bottom{top:auto;bottom:40px;left:40px}
}
/* Tablet/mobile: ẩn câu trích để không chồng lên symbol */
@media(max-width:1050px){.hero-quote{display:none}}
/* Điều hướng: dưới 900px dùng menu thu gọn (4 link + CTA không vừa 768px) */
@media(max-width:900px){
  .desktop-nav,.nav-cta{display:none}
  .menu-toggle{display:flex;width:44px;height:44px;background:none;border:1px solid var(--console-ink-3-dark);border-radius:8px;align-items:center;justify-content:center;color:var(--tom-white);cursor:pointer}
  .mobile-nav:not([hidden]){display:flex;flex-direction:column;padding:10px 0 22px;background:var(--console-surface-dark);border-bottom:1px solid var(--console-border-dark)}
  .mobile-nav a{display:flex;align-items:center;min-height:48px;padding:0 40px;border-bottom:1px solid #ffffff22;font-size:15px}
}

/* Tablet ≤900px: tiêu đề xếp trên đoạn mô tả, lưới 2 cột cho khối nhiều chữ */
@media(max-width:900px){
  .section-head,.approach-heading{display:block;margin-bottom:36px}
  .section-head>p,.approach-heading p{margin-top:22px;max-width:520px}
  .trust-grid{grid-template-columns:repeat(2,1fr)}
  .trust-grid>div:nth-child(3){border-left:0;padding-left:0}
  .trust-grid>div:nth-child(n+3){border-top:1px solid var(--console-border-dark)}
}
/* Chip luồng trong thẻ: không xuống dòng */
.flow-visual span{white-space:nowrap;padding:16px 8px}
.flow-visual{gap:4px}
.flow-visual b .icon{width:16px;height:16px}

/* Mobile: chip và nhãn không xuống dòng lẻ */
@media(max-width:720px){
  .work-card-one .work-graphic{gap:4px;padding:16px 12px}
  .work-card-one .work-graphic span{padding:13px 6px;white-space:nowrap}
  .work-card-one .work-graphic i{width:10px}
  .trust-grid span{letter-spacing:.02em;white-space:nowrap}
}
@media(max-width:720px){.mobile-nav a{padding:0 20px}}
@media(max-width:400px){.work-graphic-ui{gap:6px}.work-graphic-ui span{width:31%;padding:13px 5px;white-space:nowrap;letter-spacing:0}}
@media(max-width:340px){
  .work-graphic-ui span{white-space:normal;line-height:1.2}
  .problem h2,.section-head h2,.faq h2{font-size:36px}
  .approach h2,.contact h2,.work h2,.trust h2,.stack h2{font-size:38px}
}

/* Icon trong node của thẻ "Kết nối hệ thống" */
.node{display:grid;place-items:center;color:var(--console-accent)}
.node .icon{width:20px;height:20px}
.center-node{color:var(--tom-white)}
.ai-message{display:flex;align-items:center;min-height:68px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Chuyển ngôn ngữ EN / VI */
i-t{display:contents}
.lang-switch{display:inline-flex;border:1px solid var(--console-ink-3-dark);border-radius:8px;overflow:hidden;flex:none}
.lang-switch button{min-width:44px;min-height:44px;padding:0 8px;border:0;background:transparent;color:var(--console-ink-2-dark);font-size:12px;font-weight:700;letter-spacing:.06em;cursor:pointer;transition:background var(--tom-motion-quick),color var(--tom-motion-quick)}
.lang-switch button:hover{background:#ffffff1f}
.lang-switch button[aria-pressed="true"]{background:var(--tom-white);color:var(--tom-darkCanvas)}
.lang-switch button:focus-visible{outline-offset:-3px}
.nav-inner{gap:16px}
@media(max-width:900px){.lang-switch{margin-left:auto}}
@media(max-width:360px){.brand img{width:120px}.nav-inner{gap:10px}}